# Button Group

- Page: <https://kznlabs.github.io/labsUI/components/button-group>

## Button Group (`button-group`, component)

Joins buttons into one strip that shares borders, corners and active states. Horizontal or vertical.

- Install: `npx @kznlabs/labsui add button-group`
- Docs: <https://kznlabs.github.io/labsUI/components/button-group>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<ButtonGroup>` (+ <div> props): Groups related buttons together into a connected control or toolbar.
  - `attached?: boolean` = `true`: Fuse borders and corners into a single connected strip (default: true).
  - `orientation?: "horizontal" | "vertical"` = `"horizontal"`: "horizontal" (default) or "vertical".

### Usage

```tsx
<ButtonGroup><Button variant="outline">Years</Button><Button variant="default">Months</Button></ButtonGroup>
```

### Example: segmented-actions.tsx

```tsx
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";

export function SegmentedActions() {
  return (
    <ButtonGroup>
      <Button variant="outline" size="sm">Years</Button>
      <Button variant="outline" size="sm">Months</Button>
      <Button variant="default" size="sm">Days</Button>
    </ButtonGroup>
  );
}
```