# ButtonGroup

Container for grouping related buttons together with shared borders

## ButtonGroup[​](#buttongroup-1 "Direct link to ButtonGroup")

Container for grouping related buttons together with shared borders

**Source:** [`packages/appkit-ui/src/react/ui/button-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/button-group.tsx)

### Props[​](#props "Direct link to Props")

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

### Usage[​](#usage "Direct link to Usage")

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

<ButtonGroup /* props */ />

```

## ButtonGroupSeparator[​](#buttongroupseparator "Direct link to ButtonGroupSeparator")

Visual separator between buttons in a button group

**Source:** [`packages/appkit-ui/src/react/ui/button-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/button-group.tsx)

### Props[​](#props-1 "Direct link to 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[​](#usage-1 "Direct link to Usage")

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

<ButtonGroupSeparator /* props */ />

```

## ButtonGroupText[​](#buttongrouptext "Direct link to ButtonGroupText")

Text label or content within a button group

**Source:** [`packages/appkit-ui/src/react/ui/button-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/button-group.tsx)

### Props[​](#props-2 "Direct link to Props")

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

### Usage[​](#usage-2 "Direct link to Usage")

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

<ButtonGroupText /* props */ />

```