A button is an element in web design that represents an action or operation that the user can perform on a platform. Buttons are typically used for actions such as submitting a form, navigating to another page, confirming a decision, or initiating a process. They are visually designed to draw attention to the user to encourage them to interact with it.
Color
Primary Color
| 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 | $border-focus |
Secondary button
| Element | Property | Color token |
|---|
| Label | Text Color | $text-on-color |
| Icon | svg | $icon-brand |
| Container | background-color | $button-inverse |
| Border | border | $button-primary |
| Border:hover | border | $button-primary-hover |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Button text | 18 / 1.125 | Semibold / 600 | $title-01 |
Structure
Margins and padding
| Element | Property | px / rem | Spacing token |
|---|
| Container | padding-left, padding-right | 24 / 1.5 | $spacing-06 |
| Container | padding-top, padding-bottom | 12 / 0.75 | $spacing-04 |
| Icon | height | 13px | — |
