# Button Group

> Join related buttons into one segmented control.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/button-group.json`

## Install

```tsx
import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator } from "@aspyn-io/kit";
```

### Joined buttons

Segments share borders and flatten inner radii to read as one control.

```tsx
<ButtonGroup>
  <Button variant="outline">Day</Button>
  <Button variant="outline">Week</Button>
  <Button variant="outline">Month</Button>
</ButtonGroup>
```

### Text addon + separator

```tsx
<ButtonGroup>
  <ButtonGroupText>https://</ButtonGroupText>
  <Button variant="outline">aspyn.io</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">Copy</Button>
</ButtonGroup>
```

### Vertical

```tsx
<ButtonGroup orientation="vertical">
  <Button variant="outline">Top</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Bottom</Button>
</ButtonGroup>
```

## Notes

- orientation defaults to horizontal; pass vertical to stack. Nested ButtonGroups auto-gap so you can build split-button clusters.