Button
A button triggers an event or action. Its label tells users what will happen next.
When to use
- Actions, such as saving, sending or opening a dialog.
- The main action on a view, as its only primary button.
- Submitting a form, as the last step of the task.
When not to use
- Going somewhere. Use a link. If it needs to look like a button, use a link button.
- Several primary buttons on one screen. Only one action should stand out.
- Switching between two states. Use a toggle or a checkbox.
Guidance
Do
Name the action on the button and give the view one primary button. People can then see what the screen is for.
Don't
Do not label buttons OK or Submit, and do not make two buttons primary. Neither word says what will happen, and neither button stands out.
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.
Content
What to write, and what to leave out.
- Start with a verb and say the object. Create queue, not Submit.
- Sentence case.
- Keep it to about three words.
- Match the button to the heading it answers, so a dialog asking to delete has a Delete button.
- Add an ellipsis when the button opens another step instead of completing the action.