Buttons on the light theme
| Type |
default |
:hover
|
:focus
|
:active
|
:active:focus
|
disabled
|
|
Primary
|
|
|
|
|
|
|
|
Secondary
|
|
|
|
|
|
|
|
Positive
|
|
|
|
|
|
|
|
Negative
|
|
|
|
|
|
|
|
Brand
|
|
|
|
|
|
|
|
Link
|
|
|
|
|
|
|
|
Tertiary
|
|
|
|
|
|
|
|
Icon (secondary)
|
|
|
|
|
|
|
|
Icon only (secondary)
|
|
|
|
|
|
|
|
Icon (tertiary)
|
|
|
|
|
|
|
Buttons on the middle shade of the light theme
| Type |
default |
:hover
|
:focus
|
:active
|
:active:focus
|
disabled
|
|
Primary
|
|
|
|
|
|
|
|
Secondary
|
|
|
|
|
|
|
|
Positive
|
|
|
|
|
|
|
|
Negative
|
|
|
|
|
|
|
|
Brand
|
|
|
|
|
|
|
|
Link
|
|
|
|
|
|
|
|
Tertiary
|
|
|
|
|
|
|
|
Icon (secondary)
|
|
|
|
|
|
|
|
Icon only (secondary)
|
|
|
|
|
|
|
|
Icon (tertiary)
|
|
|
|
|
|
|
Buttons on the darkest shade of the light theme
| Type |
default |
:hover
|
:focus
|
:active
|
:active:focus
|
disabled
|
|
Primary
|
|
|
|
|
|
|
|
Secondary
|
|
|
|
|
|
|
|
Positive
|
|
|
|
|
|
|
|
Negative
|
|
|
|
|
|
|
|
Brand
|
|
|
|
|
|
|
|
Link
|
|
|
|
|
|
|
|
Tertiary
|
|
|
|
|
|
|
|
Icon (secondary)
|
|
|
|
|
|
|
|
Icon only (secondary)
|
|
|
|
|
|
|
|
Icon (tertiary)
|
|
|
|
|
|
|
Buttons on the dark theme
| Type |
default |
:hover
|
:focus
|
:active
|
:active:focus
|
disabled
|
|
Primary
|
|
|
|
|
|
|
|
Secondary
|
|
|
|
|
|
|
|
Positive
|
|
|
|
|
|
|
|
Negative
|
|
|
|
|
|
|
|
Brand
|
|
|
|
|
|
|
|
Link
|
|
|
|
|
|
|
|
Tertiary
|
|
|
|
|
|
|
|
Icon (secondary)
|
|
|
|
|
|
|
|
Icon only (secondary)
|
|
|
|
|
|
|
|
Icon (tertiary)
|
|
|
|
|
|
|
Buttons on the middle tint of the dark theme
| Type |
default |
:hover
|
:focus
|
:active
|
:active:focus
|
disabled
|
|
Primary
|
|
|
|
|
|
|
|
Secondary
|
|
|
|
|
|
|
|
Positive
|
|
|
|
|
|
|
|
Negative
|
|
|
|
|
|
|
|
Brand
|
|
|
|
|
|
|
|
Link
|
|
|
|
|
|
|
|
Tertiary
|
|
|
|
|
|
|
|
Icon (secondary)
|
|
|
|
|
|
|
|
Icon only (secondary)
|
|
|
|
|
|
|
|
Icon (tertiary)
|
|
|
|
|
|
|
Buttons on the lightest tint of the dark theme
| Type |
default |
:hover
|
:focus
|
:active
|
:active:focus
|
disabled
|
|
Primary
|
|
|
|
|
|
|
|
Secondary
|
|
|
|
|
|
|
|
Positive
|
|
|
|
|
|
|
|
Negative
|
|
|
|
|
|
|
|
Brand
|
|
|
|
|
|
|
|
Link
|
|
|
|
|
|
|
|
Tertiary
|
|
|
|
|
|
|
|
Icon (secondary)
|
|
|
|
|
|
|
|
Icon only (secondary)
|
|
|
|
|
|
|
|
Icon (tertiary)
|
|
|
|
|
|
|