Button group
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”Connected buttons for switching views or filters.
Variants: 2
| Property | Type / options |
|---|---|
| Size | sm · md |
Do
- Use for 2–5 related, mutually exclusive options.
- Keep labels short and parallel.
- Show the current option with the Selected state.
Don’t
- Don’t use for unrelated actions.
- Don’t mix icon-only and text items.
- Don’t exceed one row.