Tabs allow users to navigate between related sections of content without leaving a page. Tabs contain at least two items, and one tab is active at a time.
Color
Line tab
| State | Element | Property | Color token |
|---|
| Unselected | Tab | background-color | transparent |
| | | border-bottom | $border-subtle-01 |
| | Label | text color | $text-secondary |
| | Icon | svg | $icon-secondary |
| Selected | Tab | background-color | transparent |
| | | border | $border-interactive |
| | Label | text color | $text-primary |
| | Icon | svg | $icon-primary |
Contained tab
| State | Element | Property | Color token |
|---|
| Unselected | Tab | background-color | $background-secondary-light |
| | | border | $border-subtle-01 |
| | Label | text color | $text-secondary |
| | Icon | svg | $icon-secondary |
| Selected | Tab | background-color | $background-secondary-light |
| | | border | $border-interactive |
| | Label | text color | $text-primary |
| | Icon | svg | $icon-primary |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Label:unselected | 18 / 1.125 | Regular / 400 | $tab-label-01 |
| Label:selected | 18 / 1.125 | Semibold / 600 | $tab-label-selected-01 |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Tab | height | 50px | – |
| | border-bottom | 2px | – |
| | width | auto-width | – |
| | margin-left | 1px | – |
| Label | padding-left, padding-right | 24 / 1.5 | $spacing-06 |
| | padding-top, padding-bottom | 12 / 0.75 | $spacing-04 |
| Icon | padding-right | 16 / 1 | $spacing-05 |
| | padding-left | 8 / 0.5 | $spacing-03 |
| | svg | 16 x 16 | – |
