Button Group
ProHorizontal group of related buttons with shared border radius, creating a single visual unit. Used for action pairs like Save/Cancel, toolbar groups, or toggle-style button sets where options are mutually exclusive.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Horizontal | ||
| Vertical |
Usage Guidelines
Do
Group only related actions — all buttons should serve a common purpose.
Don't
Mix Primary and Secondary buttons in the same group.
Do
Keep the group to 2–4 buttons maximum.
Don't
Use for navigation — use Tabs or Segmented Control instead.
Do
Use consistent button variants within the group (all Secondary, for example).
Don't
Place more than 4 buttons in a group — it becomes hard to scan.
Code
Design Tokens
Accessibility
- Wrap with role="group" and provide aria-label describing the group's purpose.
- Each button remains individually focusable via Tab.
- If acting as a toggle set, use aria-pressed on each button.