...
Buttons are clickable elements that are used to act. They contain perform an action. Button contains a text label and a supporting icon can be displayed.
...
Buttons can contain a combination of a clear label and an icon while links are always text. Button is always displayed as an icon.
...
States
Buttons have five four states that define their appearance:
...
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
...