Tabs
Color
Line tabs
State | Element | Property | Color token |
---|---|---|---|
Enabled | Background | background-color | transparent |
Label | text-color | $text-secondary | |
Icon | svg | $icon-secondary | |
Background | border-bottom | $border-subtle | |
Scrollable icon | svg | $icon-primary | |
Scrollable fade | background-color | 8px, linear-gradient white to 100% transparent | |
Scrollable background | background-color | $background | |
Selected | Label | text-color | $text-primary |
Icon | svg | $icon-primary | |
Background | border-bottom | $interactive |
![Example of selected and enabled line tabs Example of selected and enabled line tabs](/static/dcd5e549a57c7ccb275d9c7969ada1d2/3cbba/tab-style-1.png)
Example of selected and enabled line tabs.
Interactive states
State | Element | Property | Color token |
---|---|---|---|
Hover | Background | border-bottom | $interactive |
Label | text-color | $text-primary | |
Icon | svg | $icon-primary | |
Scrollable background | background-color | $background-hover | |
Active | Scrollable background | background-color | $layer-accent |
Focus | Scrollable background | border | $focus |
Focus-enabled | Label | text-color | $text-secondary |
Background | border | $interactive | |
Icon | svg | $icon-secondary | |
Focus-selected | Label | text-color | $text-primary |
Background | border | $interactive | |
Icon | svg | $icon-primary | |
Disabled | Label | text-color | $text-disabled |
Icon | svg | $icon-disabled | |
Background | background-color | $icon-disabled |
![Examples of hover, focus-enabled, focus-selected, and disabled states Examples of hover, focus-enabled, focus-selected, and disabled states](/static/ec0738feacffb9eda56bac7d5973139d/3cbba/tab-style-3.png)
Examples of hover, focus-enabled, focus-selected, and disabled states for line tabs.
![Examples of enabled, hover, active, and disabled states for scrollable line tabs Examples of enabled, hover, active, and disabled states for scrollable line tabs](/static/c8c330aec5fd7faac94212052f9791e3/3cbba/tab-style-4.png)
Examples of enabled, hover, active, and disabled states for scrollable line tabs.
Contained tabs
State | Element | Property | Color token |
---|---|---|---|
Enabled | Background | background-color | $layer-accent |
Label | text-color | $text-secondary | |
Icon | svg | $icon-secondary | |
Background | border-right | $border-strong | |
Scrollable icon | svg | $icon-secondary | |
Label | text-color | $text-primary | |
Selected | Background | background-color | $layer |
Icon | svg | $icon-primary | |
Background | border-top | $border-interactive |
![Examples of selected and enabled contained tabs Examples of selected and enabled contained tabs](/static/479df73d1ca4786661992ab25af095e9/3cbba/tab-style-2.png)
Examples of selected and enabled contained tabs.
Interactive states
State | Element | Property | Color token |
---|---|---|---|
Hover | Background | background-color | $layer-accent-hover |
Label | text-color | $text-primary | |
Icon | svg | $icon-primary | |
Scrollable background | background-color | $layer-accent-hover | |
Active | Scrollable background | background-color | $layer-accent-active |
Focus | Scrollable background | border | $focus |
Focus-enabled | Label | text-color | $text-secondary |
Background | background-color | $layer-accent | |
Icon | svg | $icon-secondary | |
Focus-selected | Label | text-color | $text-primary |
Background | background-color | $layer | |
Icon | svg | $icon-primary | |
Disabled | Label | text-color | $text-disabled |
Icon | svg | $icon-disabled | |
Background | background-color | $icon-disabled | |
Border | border-right | $border-disabled |
![Hover, focus-enabled, focus-selected, and disabled states for contained
tabs. Hover, focus-enabled, focus-selected, and disabled states for contained
tabs.](/static/ceb1307f15dbfb402278aa2ed6860eb5/3cbba/tab-style-5.png)
Hover, focus-enabled, focus-selected, and disabled states for contained tabs.
![Enabled, hover, active, and focus states for contained scrollable tabs. Enabled, hover, active, and focus states for contained scrollable tabs.](/static/227136b7d15c52362345462220800d34/3cbba/tab-style-6.png)
Examples of enabled, hover, active, and focus states for contained scrollable tabs.
Typography
Tab labels should be set in sentence case, and should not exceed three words.
Element | Font-size (px/rem) | Font-weight | Type token |
---|---|---|---|
Label: enabled | 14 / 0.875 | Regular / 400 | $body-compact-01 |
Label: selected | 14 / 0.875 | SemiBold / 600 | $heading-compact-01 |
Structure
Line tabs
Element | Property | px / rem | Spacing token |
---|---|---|---|
Tab | height | 40 / 2.5 | – |
border-bottom | 2px | – | |
width | auto-width | – | |
margin-left | 1px | – | |
Label | padding-left, padding-right | 16 / 1 | $spacing-05 |
padding-top, padding-bottom | 8 / 0.5 | $spacing-03 | |
Icon | padding-right | 16 / 1 | $spacing-05 |
padding-left | 8 / 0.5 | $spacing-03 | |
svg | 16 x 16 | – | |
Scrollable icon | svg | 16 x 16 | – |
![Structure and spacing measurements for line tabs. Structure and spacing measurements for line tabs.](/static/1f44564c2dd747a6787620d018942a7e/3cbba/tab-style-7.png)
Structure and spacing measurements for line tabs | px / rem
Icon-only modifier
Element | Property | px / rem | Spacing token |
---|---|---|---|
Tab (md) | height, width | 40 / 2.5 | – |
svg | 16 x 16 | – | |
Tab (lg) | height, width | 48 / 3 | – |
svg | 20 x 20 | – |
![Structure and spacing measurements for line tabs in px and rem Structure and spacing measurements for line tabs in px and rem](/static/1a76d1e1eff82ec772391105393bbd34/3cbba/tab-style-7b.png)
Structure and spacing measurements for icon-only line tabs | px / rem
Contained tabs
Element | Property | px / rem | Spacing token |
---|---|---|---|
Tab | height | 40 / 2.5 | – |
border-top | 2px | – | |
width | auto-width, grid | – | |
Label | padding-left, padding-right | 16 / 1 | $spacing-05 |
Icon | padding-right | 16 / 1 | $spacing-05 |
padding-left | 16 / 1 | $spacing-05 | |
svg | 16 x 16 | – | |
Tab | border-right | 1px | – |
Scrollable icon | svg | 16 x 16 | – |
Scrollable background | border-right, border-left | 1px | – |
![Structure and spacing measurements for contained tabs in px and rem Structure and spacing measurements for contained tabs in px and rem](/static/9d7b37e0edc41732b233d4698b1ec3c9/3cbba/tab-style-8.png)
Structure and spacing measurements for contained tabs | px / rem
Icon-only modifier
Element | Property | px / rem | Spacing token |
---|---|---|---|
Tab (lg) | height, width | 48 / 3 | – |
svg | 20 x 20 | – |
![Structure and spacing measurements for icon-only contained tabs in px and
rem Structure and spacing measurements for icon-only contained tabs in px and
rem](/static/bdea1cfe43a6475b0e811b507bce6abc/3cbba/tab-style-8b.png)
Structure and spacing measurements for icon-only contained tabs | px / rem