Stable
Buttons let managers act: save, send, connect, disconnect. Every screen should make it obvious which things can be clicked and what will happen. There are four kinds of button, one for each level of emphasis, so the most important action always stands out.
Buttons are at least 36px tall. On touch screens, keep at least 8px between buttons so each one is easy to hit.
Specifications
Anatomy
Anatomy
Size and spacing
Primary button
Emphasis: High
For the one main action on a screen or in a dialog: Save, Send, Connect. Never more than one per view.
Example
States
Default
Hover
Focus
Disabled
Example
States
Default
Hover
Focus
Disabled
Secondary button
Emphasis: Medium
The default. For every other action, and for actions repeated in a list.
Example
States
Default
Hover
Active
Disabled
Example
States
Default
Hover
Active
Disabled
Danger button
Emphasis: Medium
For actions that delete or disconnect. Always ask for confirmation in a dialog first.
Example
States
Default
Hover
Disabled
Example
States
Default
Hover
Disabled
Link button
Emphasis: Low
For low-emphasis actions inside tables and text, such as View or Edit on a row.
Example
States
Default
Hover
Example
States
Default
Hover
Usage
When to use
- Primary: the one main action in a view.
- Secondary: every other action.
- Danger: delete or disconnect, always confirmed.
- Link: low-emphasis actions in tables and text.
When not to use
- To go to another page: use a link. Buttons act, links go.
- More than one primary button in the same view.
Content
- Start with a verb: "Save changes", "Send reminder", "Connect".
- Use sentence case and keep to three words or fewer.
- Say what will happen, not "OK" or "Submit".
Do and don't
Enter a price, like 12.50
Do
- Keep buttons pressable. Validate when pressed and show what to fix (see Form submit and validation).
- While an action runs, keep the label and add a spinner, rather than disabling the button.
- Right-align buttons in dialogs, cards and short tasks, with the primary button last.
- Left-align buttons at the end of long, full-page forms, with the primary button first.
Don't
- Disable a submit button to stop a form being sent. The one exception: Previous and Next at the ends of a list (see Pagination).
- Use a button to go to another page, or a link to save or delete.
- Put a tooltip on a disabled button: keyboard users cannot reach it.
Implementation
HTML
<div class="at-inline">
<button type="button" class="at-button at-button--primary">Save changes</button>
<button type="button" class="at-button">Cancel</button>
<button type="button" class="at-button at-button--danger">Disconnect</button>
<button type="button" class="at-button at-button--link">View history</button>
<button type="button" class="at-button" disabled>Disabled</button>
</div>Classes
| Class | What it does |
|---|---|
at-button | Secondary (default) |
at-button--primary | Main action, accent fill |
at-button--danger | Destructive action |
at-button--link | Looks like a link |
disabled / aria-disabled="true" | Unavailable |
Tokens used
--at-border, --at-surface, --at-text, --at-bg-neutral-hovered, --at-bg-neutral-pressed, --at-border-primary, --at-bg-primary, --at-text-inverse, --at-border-danger, --at-text-danger, --at-bg-danger-subtle, --at-text-primary
Accessibility
- Use button for actions and a for links.
- Focus shows a 3px outline; do not remove it.