Button group
A button group shows related actions together.
When to use
- Two or three actions belonging to the same thing, such as the footer of a dialog.
- Actions that should appear as one set instead of separate controls.
When not to use
- A single action. It does not need a group.
- Actions for different things. Grouping them suggests they are related.
- More than about three actions. Use a menu instead.
Guidance
Do
Put the primary action last and name the group. Order the actions from least to most final.
Don't
Do not put the primary action first, and do not use danger for a cancel action. Discarding a draft is not destructive, so it should not look like it.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| button | neutral | 0.042Ambient | 0.066Substrate |
| button | disabled | 0.042Ambient | 0.129Ambient |
| button--danger | danger-bold | 0.443Marked | 0.617Marked |
| button--default | neutral | 0.042Ambient | 0.066Substrate |
| button--discovery | discovery-bold | 0.444Marked | 0.624Marked |
| button--primary | brand-bold | 0.460Marked | 0.598Marked |
| button--selected | selected | 0.042Ambient | 0.062Substrate |
| button--subtle | neutral-subtle | 0.000Substrate | 0.000Substrate |
| button--warning | warning-bold | 0.448Marked | 0.601Marked |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.