A toggle is a digital on/off switch. These are best used for changing the state of system functionalities and preferences. They may replace two radio buttons or a single checkbox to allow users to choose between two opposing states.
Color
| Element | Property | Color token |
|---|
| Label text | text color | $text-secondary |
| Action text | text color | $text-primary |
| Background (off) | background-color | $layer-03 |
| Handle (off) | background-color | $icon-on-color |
| Background (on) | background-color | $icon-brand |
| Handle (on) | background-color | $icon-on-color |
| Checkmark | fill | $icon-on-color |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Label text | 14 / 0.875 | Semibold / 600 | $heading-compact-02 |
| Icon text | 14 / 0.875 | Regular / 400 | $body-compact-02 |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Toggle | width | 35px | – |
| | height | 20px | – |
| Handle | height, width | 16px | – |
| Label text | margin-bottom | 12 / 0.75 | $spacing-06 |
| Action text | margin-left | 8 / 0.5 | $spacing-05 |
