Split button
A split button pairs a primary action with a menu of related actions.
When to use
- One action that most people want, with a few related variants.
- When the most common action should take one click and the others should stay out of the way.
When not to use
- Unrelated actions. The two halves suggest variants of the same action.
- No clear default. If the choices are equal, use a dropdown menu instead.
- A single action. Use a button.
Guidance
Do
Put the most common action in the main half. Keep the menu for variants of it, such as saving as a copy.
Don't
Do not hide unrelated actions behind the arrow. People expect variants of Save, not Delete.
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.