Button group
Connected buttons for switching views or filters.
In Figma
Section titled “In Figma”From guidelines/components/button-group.md
Properties, variants and anatomy of the Figma components.
Button group
Section titled “Button group”Variants: 2
| Property | Type / options |
|---|---|
| Size | sm · md |
Button group item
Section titled “Button group item”Segment inside a Button group. Selected = toggled on.
Variants: 10
| Property | Type / options |
|---|---|
| Label | text |
| Leading icon | boolean (off) |
| Leading icon swap | instance swap (icon) |
| Size | sm · md |
| State | Default · Hover · Selected · Focused · Disabled |
Button group
Section titled “Button group”Do
- Use for 2–5 related, mutually exclusive options.
- Keep labels short and parallel.
- Show the current option with the Selected state.
Forbidden
- Never group unrelated actions.
- Never mix icon-only and text items.
- Never wrap a button group to a second row.