ButtonGroup
Groups related buttons into a connected control.
Quick Preview
Composition
Use this public composition when building ButtonGroup:
ButtonGroup
├── Button
├── ButtonGroupSeparator
└── ButtonGroupTextUsage
<ButtonGroup>
<Button>Monthly</Button>
<Button>Yearly</Button>
</ButtonGroup>Examples
Orientation
Use orientation to group controls horizontally for toolbars or vertically for stacked choice sets.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
orientation | `"horizontal" | "vertical"` | "horizontal" |
size | `"sm" | "md" | "lg"` |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented ButtonGroup composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.