Introduction
Buttons are clickable elements that are used to act. They contain a text label and a supporting icon can be displayed.
The label describes the action that will occur if a user interacts with it.
Anatomy
Buttons can contain a combination of a clear label and an icon while links are always text.
States
Buttons have five states that define their appearance:
Default, Hover, Focus and Disabled.
When you add a button to your interface, initially it is in the default state, which means the button is enabled and the user is not interacting with it.
Variants
Primary
The primary button should only be used once per view (not including a modal dialog), these buttons have the most emphasis.
It should never be doubled up to sit side by side. It is used when an action is clearly more important than the other actions and you need to draw attention to it.
Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance.
primary.large.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.large.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.large.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
Secondary
The secondary button is the standard button for most use cases. The outlined styling places less emphasis on these buttons.
secondary.large.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.large.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.large.icon
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
Primary reversed
The primary reversed should be used for primary actions on pictures or dark backgrounds.
primary.large.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.large.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.large.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
primary.small.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
Secondary reversed
The secondary reversed should be used for secondary actions on pictures or dark backgrounds.
secondary.large.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.large.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.large.icon
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.icon+text.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
secondary.small.icon.
 | Default (State) |
 | Hover (State) |
 | Focus (State) |
 | Disabled (State) |
Sizes & Padding
 | Large button | The Large button is the alternative button size for use in ample spaces. |
 | Small button | The Small button is the alternative button size for use in tight spaces. |