Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# ButtonGroup

Container for grouping related buttons together with shared borders

## ButtonGroup​

Container for grouping related buttons together with shared borders

Source: `packages/appkit-ui/src/react/ui/button-group.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`orientation` | `"horizontal" | "vertical" | null` |  | - | -

### Usage​

    import { ButtonGroup } from '@databricks/appkit-ui';

    <ButtonGroup /* props */ />

## ButtonGroupSeparator​

Visual separator between buttons in a button group

Source: `packages/appkit-ui/src/react/ui/button-group.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`orientation` | `enum` |  | `vertical` | Either `vertical` or `horizontal`. Defaults to `horizontal`.
`decorative` | `boolean` |  | - | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.
`asChild` | `boolean` |  | - | -

### Usage​

    import { ButtonGroupSeparator } from '@databricks/appkit-ui';

    <ButtonGroupSeparator /* props */ />

## ButtonGroupText​

Text label or content within a button group

Source: `packages/appkit-ui/src/react/ui/button-group.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | `false` | -

### Usage​

    import { ButtonGroupText } from '@databricks/appkit-ui';

    <ButtonGroupText /* props */ />