Button Group
Button Group arranges multiple Button components as a single logical unit.
When to use
- when you need to present a set of related actions together.
- when the actions share a common visual style and should be grouped for keyboard navigation.
- when you want a consistent orientation (horizontal or vertical) across the buttons.
When not to use
- when the actions are unrelated; use independent buttons instead.
- when you need a single button with a dropdown; use MenuButton instead.
Anatomy / variants
| Variant | Description | When to use |
|---|---|---|
| Orientation | Horizontal (default) or vertical layout of the buttons. | Use Horizontal for toolbar‑style actions; use Vertical for stacked lists. |
| Style | Primary, neutral, error, success, warning, or info color schemes. | Choose Primary for main actions; Neutral for secondary; use Error/Success/Warning/Info to convey status. |
| Variant | Filled (default), outlined, or ghost visual treatments. | Filled for emphasis, outlined for minimal emphasis, ghost for unobtrusive actions. |
| Size | Large (default), medium, or small button sizes. | Large for prominent groups, small for dense spaces. |
| Is Disabled | Disables all buttons in the group when set to Yes. | Set to Yes to prevent interaction with the entire group. |
Props / API
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | string | "Horizontal" | Determines the layout direction of the button group. |
style | string | "Primary" | Sets the color scheme applied to all buttons in the group. |
variant | string | "Filled" | Defines the visual treatment of the buttons. |
size | string | "Large" | Controls the size of each button in the group. |
isDisabled | string | "No" | When "Yes" disables interaction for every button in the group. |
Accessibility
- Ensure each child Button has an accessible name (via its label or
aria-label). - When
isDisabledis Yes, setaria-disabled="true"on the container or propagate it to each button. - Use
role="group"with an appropriatearia-labelledbyto give the group a descriptive label for assistive technologies. - Verify that the selected
styleandvariantmeet WCAG AA contrast requirements for text and UI elements.
Changelog
- 2026-06-29 — Initial doc generated from Figma.