Buttons on the light theme
| Type | default | :hover | :focus | :active | :active:focus | disabled |
|---|
| Primary | | | | | | |
| brand | | | | | | |
| link | | | | | | |
| negative | | | | | | |
| positive | | | | | | |
| secondary | | | | | | |
| tertiary | | | | | | |
| Icon (secondary) | | | | | | |
| Icon only (secondary) | | | | | | |
| Icon only(tertiary) | | | | | | |
Buttons on the middle shade of the light theme
| Type | default | :hover | :focus | :active | :active:focus | disabled |
|---|
| Primary | | | | | | |
| brand | | | | | | |
| link | | | | | | |
| negative | | | | | | |
| positive | | | | | | |
| secondary | | | | | | |
| tertiary | | | | | | |
| Icon (secondary) | | | | | | |
| Icon only (secondary) | | | | | | |
| Icon only(tertiary) | | | | | | |
Buttons on the darkest shade of the light theme
| Type | default | :hover | :focus | :active | :active:focus | disabled |
|---|
| Primary | | | | | | |
| brand | | | | | | |
| link | | | | | | |
| negative | | | | | | |
| positive | | | | | | |
| secondary | | | | | | |
| tertiary | | | | | | |
| Icon (secondary) | | | | | | |
| Icon only (secondary) | | | | | | |
| Icon only(tertiary) | | | | | | |
Buttons on the dark theme
| Type | default | :hover | :focus | :active | :active:focus | disabled |
|---|
| Primary | | | | | | |
| brand | | | | | | |
| link | | | | | | |
| negative | | | | | | |
| positive | | | | | | |
| secondary | | | | | | |
| tertiary | | | | | | |
| Icon (secondary) | | | | | | |
| Icon only (secondary) | | | | | | |
| Icon only(tertiary) | | | | | | |
Buttons on the middle tint of the dark theme
| Type | default | :hover | :focus | :active | :active:focus | disabled |
|---|
| Primary | | | | | | |
| brand | | | | | | |
| link | | | | | | |
| negative | | | | | | |
| positive | | | | | | |
| secondary | | | | | | |
| tertiary | | | | | | |
| Icon (secondary) | | | | | | |
| Icon only (secondary) | | | | | | |
| Icon only(tertiary) | | | | | | |
Buttons on the lightest tint of the dark theme
| Type | default | :hover | :focus | :active | :active:focus | disabled |
|---|
| Primary | | | | | | |
| brand | | | | | | |
| link | | | | | | |
| negative | | | | | | |
| positive | | | | | | |
| secondary | | | | | | |
| tertiary | | | | | | |
| Icon (secondary) | | | | | | |
| Icon only (secondary) | | | | | | |
| Icon only(tertiary) | | | | | | |