# Button Group

Row of related buttons joined by shared borders. It can also work as a single-choice control, with an accent pill that glides to whichever option you pick.

> Primitive · Free · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add button-group
```

## Import

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

## Variants

- `actions` — Actions: `npx @lumioui/cli add button-group-actions`
- `slots` — Slots: `npx @lumioui/cli add button-group-slots`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `attached?` | `boolean` | Attach buttons together (shared borders, merged radius). Default true. |
| `orientation?` | `"horizontal" | "vertical"` | Orientation of the group. Default "horizontal". |
| `disabled?` | `boolean` | Disable every child in the group. |
| `className?` | `string` | — |
| `itemClassName?` | `string` | Extra classes merged into each child element that accepts className. |
| `value?` | `string | null` | Selected child (matched against each child's React `key`). Controlled. |
| `defaultValue?` | `string | null` | Initial selection when uncontrolled. |
| `onValueChange?` | `(value: string) => void` | Fires when a child is pressed in selection mode, after its own onPress. |
| `children?` | `React.ReactNode` | — |

Source: https://lumioui.com/components/button-group