Actions
Button Group
Button Group is a set of related, mutually exclusive actions (often a segmented toggle, like a view switcher) visually connected as one unit.
Style × Count (2/3/4) — 9 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Purpose
Button Group is a set of related, mutually exclusive actions (often a segmented toggle, like a view switcher) visually connected as one unit.
When to use
When 2–4 options represent a single choice or view state (e.g. List/Grid view, Day/Week/Month range).
When not to use
For more than ~4 options — use Select or Tabs instead. For unrelated actions that don't belong together visually.
Accessibility
In code, implement as role="radiogroup" with each segment as role="radio" when it represents a single selectable state, not a row of independent buttons.
Common mistakes
Giving each segment its own individual border — creates an ugly double-border seam where segments touch. This component deliberately uses one shared outer border + a colored divider gap instead.
Properties
Style × Count as variants. Segment labels are set via direct instance override, not a formal per-segment property.
Tokens used
component/radius/controlsemantic/border/defaultsemantic/surface/defaultsemantic/action/primarysemantic/action/danger