| Element | Property | Color token |
|---|
| Label | text color | $text-on-color |
| Icon | svg | $icon-on-color |
| Container | background-color | $button-primary |
| Container:hover | background-color | $button-primary-hover |
| Container:active | background-color | $button-primary-active |
| Container:focus | border | $focus |
| inset | $focus-inset |
| Container:disabled | background-color | $button-disabled |
| Label:disabled | text color | $text-on-color-disabled |
| Icon:disabled | svg | $icon-on-color-disabled |
| Element | Property | Color token |
|---|
| Label | text color | $text-on-color |
| Icon | svg | $icon-on-color |
| Container | background-color | $button-secondary |
| Container:hover | background-color | $button-secondary-hover |
| Container:active | background-color | $button-secondary-active |
| Container:focus | border | $focus |
| inset | $focus-inset |
| Container:disabled | background-color | $button-disabled |
| Label:disabled | text color | $text-on-color-disabled |
| Icon:disabled | svg | $icon-on-color-disabled |
| Element | Property | Color token |
|---|
| Label | text color | $button-tertiary |
| Icon | svg | $button-tertiary |
| Container | background-color | transparent |
| border | $button-tertiary |
| Label:hover | text color | $text-inverse |
| Icon:hover | svg | $icon-inverse |
| Container:hover | background-color | $button-tertiary-hover |
| Label:active | text color | $text-inverse |
| Icon:active | svg | $icon-inverse |
| Container:active | background-color | $button-tertiary-active |
| Container:focus | background-color | $button-tertiary-hover |
| border | $focus |
| inset | $focus-inset |
| Container:disabled | background | transparent |
| border | $button-disabled |
| Label:disabled | text color | $text-disabled |
| Icon:disabled | svg | $icon-disabled |
| Element | Property | Color token |
|---|
| Label | text color | $link-primary |
| Icon | svg | $link-primary |
| Container | background-color | Transparent |
| Label:hover | text color | $link-primary-hover |
| Icon:hover | svg | $link-primary-hover |
| Container:hover | background-color | $background-hover |
| Container:active | background-color | $background-active |
| Container:focus | border | $focus |
| Label:disabled | text color | $text-disabled |
| Label:disabled | svg | $icon-disabled |
Ghost button – Icon only
| Element | Property | Color token |
|---|
| Icon | svg | $icon-primary |
| Container | background-color | Transparent |
| Container:hover | background-color | $background-hover |
| Container:active | background-color | $background-active |
| Container:focus | border | $focus |
| Container:selected | background-color | $background-selected |
| Icon:disabled | svg | $icon-disabled |
| Element | Property | Color token |
|---|
| Label | text color | $text-on-color |
| Icon | svg | $icon-on-color |
| Container | background-color | $button-danger-primary |
| Container:hover | background-color | $button-danger-hover |
| Container:active | background-color | $button-danger-active |
| Container:focus | border | $focus |
| inset | $focus-inset |
| Container:disabled | background-color | $button-disabled |
| Label:disabled | text color | $text-on-color-disabled |
| Icon:disabled | svg | $icon-on-color-disabled |
| Element | Property | Color token |
|---|
| Label | text color | $button-danger-secondary |
| Icon | svg | $button-danger-secondary |
| Container | border | $button-danger-secondary |
| Container:hover | background-color | $button-danger-hover |
| Label:hover | text color | $text-on-color |
| Icon:hover | svg | $icon-on-color |
| Container:active | background-color | $button-danger-active |
| Label:active | text color | $text-on-color |
| Icon:active | svg | $icon-on-color |
| Container:focus | border | $focus |
| inset | $focus-inset |
| Container:disabled | background-color | $button-disabled |
| Label:disabled | text color | $text-disabled |
| Icon:disabled | svg | $icon-disabled |
| Element | Property | Color token |
|---|
| Label | text color | $button-danger-secondary |
| Icon | svg | $button-danger-secondary |
| Container:hover | background-color | $button-danger-hover |
| Label:hover | text color | $text-on-color |
| Icon:hover | svg | $icon-on-color |
| Container:active | background-color | $button-danger-active |
| Label:active | text color | $text-on-color |
| Icon:active | svg | $icon-on-color |
| Container:focus | border | $focus |
| inset | $focus-inset |
| Container:disabled | background-color | $button-disabled |
| Label:disabled | text color | $text-disabled |
| Icon:disabled | svg | $icon-disabled |
Button text should be set in sentence case, with only the first word in a phrase
and any proper nouns capitalized.
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Button text | 14 / 0.875 | Regular / 400 | $body-compact-01 |
| Button text (expressive) | 16 / 1 | Regular / 400 | $body-compact-02 |
A button cannot have any element or text within 16 pixels / 1 rem of its
borders. For button groups, the primary button is positioned on the outside of
the set, while the secondary button is positioned inside. For a button with a
glyph, the space between the button label and the glyph must be greater than or
equal to 16 pixels / 1 rem. This is to accommodate for instances where two or
more buttons with glyphs appear together.
| Element | Property | px / rem | Spacing token |
|---|
| Button | padding-left | 16 / 1 | $spacing-05 |
| padding-right | 64 / 4 | – |
| Button:small | padding-left | 16 / 1 | $spacing-05 |
| padding-right | 64 / 4 | – |
| Ghost button | padding-left, padding-right | 16 / 1 | $spacing-05 |
| Icon only button | margin-left, margin-right | 16 / 1 | $spacing-05 |
| Icon | svg | 16 x 16 | – |
| Icon: expressive button | size | 20 x 20 | – |
| Focus | box-shadow: inset | 1px | – |
