...
 | 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) |
...
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) |
...