Skip to main contentCarbon Design System

Tabs

The following page documents visual specifications such as color, typography, structure, and size.

Color

Line tab color

TypeElementPropertyColor token
UnselectedTabbackground-colortransparent
border-bottom
$border-subtle
*
Labeltext-color
$text-secondary
Iconsvg
$icon-secondary
SelectedLabeltext-color
$text-primary
Iconsvg
$icon-primary
Tabborder-bottom
$border-interactive

* Denotes a contextual color token that will change values based on the layer it is placed on.

Example of selected and unselected line tabs

Example of selected and unselected line tabs.


Line tab interactive state color


StateElementPropertyColor token
HoverLabeltext-color
$text-primary
Iconsvg
$icon-primary
Tabborder-bottom
$border-strong
FocusTab: unselectedborder
$focus
Tab: selectedborder
$focus
DisabledLabeltext-color
$text-disabled
Iconsvg
$icon-disabled
Tabbackground-colortransparent
border-bottom
$border-disabled
Examples of hover, unselected focus, selected focus, and disabled states for line tabs.

Examples of hover, unselected focus, selected focus, and disabled states for line tabs.


Line tab scrollable states


StateElementPropertyColor token
EnabledIconsvg
$icon-primary
Buttonlinear-gradient
$background
to 100% transparent, 8px
background-color
$background
HoverButtonbackground-color
$background-hover
ActiveButtonbackground-color
$background-active
Examples of enabled, hover, and active states for scrollable line tabs.

Examples of enabled, hover, and active states for scrollable line tabs.

Dismissible line tab color

TypeElementPropertyColor token
UnselectedTabbackground-colortransparent
border-bottom
$border-subtle
*
Labeltext-color
$text-secondary
Iconsvg
$icon-secondary
SelectedLabeltext-color
$text-primary
Iconsvg
$icon-primary
Tabborder-bottom
$border-interactive

* Denotes a contextual color token that will change values based on the layer it is placed on.

Example of selected and unselected dismissible line tabs.

Example of selected and unselected dismissible line tabs.


Dismissible line tab interactive state


StateElementPropertyColor token
HoverLabeltext-color
$text-primary
Iconsvg
$icon-primary
background-color
$background-hover
Tabborder-bottom
$border-strong
*
FocusTab: unselectedborder
$focus
Tab: selectedborder
$focus
DisabledLabeltext-color
$text-disabled
Iconsvg
$icon-disabled
Tabbackground-colortransparent
border-bottom
$border-disabled

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of unselected close hover, unselected hover, unselected focus, and disabled states for dismissible line tabs.

Examples of unselected close hover, unselected hover, unselected focus, and disabled states for dismissible line tabs.

Examples of selected close hover and selected focus states for dismissible line tabs

Examples of selected close hover and selected focus states for dismissible line tabs.

Contained tab color

TypeElementPropertyColor token
UnselectedTabbackground-color
$layer-accent
*
border-right
$border-strong
*
Labeltext-color
$text-secondary
Secondary labeltext-color
$text-secondary
Iconsvg
$icon-secondary
SelectedTabbackground-color
$layer
*
border-top
$border-interactive
Labeltext-color
$text-primary
Secondary labeltext-color
$text-primary
Iconsvg
$icon-primary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of selected and unselected contained tabs.

Examples of selected and unselected contained tabs.


Contained tab interactive state color


StateElementPropertyColor token
HoverTabbackground-color
$layer-accent-hover
*
Labeltext-color
$text-primary
Secondary labeltext-color
$text-primary
Iconsvg
$icon-primary
FocusTabborder
$focus
DisabledLabeltext-color
$text-on-color-disabled
Secondary labeltext-color
$text-on-color-disabled
Iconsvg
$icon-on-color-disabled
Tabbackground-color
$button-disabled

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of hover, unselected focus, selected focus, and disabled states for contained tabs.

Examples of hover, unselected focus, selected focus, and disabled states for contained tabs.


Contained tab scrollable states


StateElementPropertyColor token
EnabledIconsvg
$icon-secondary
Buttonbackground-color
$layer-accent
*
HoverButtonbackground-color
$layer-accent-hover
*
Iconsvg
$icon-primary
ActiveButtonbackground-color
$layer-accent-active
*

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of enabled, hover, and active states for contained scrollable tabs.

Examples of enabled, hover, and active states for contained scrollable tabs.

Dismissible contained tab color

TypeElementPropertyColor token
UnselectedTabbackground-color
$layer-accent
*
border-right
$border-strong
*
Labeltext-color
$text-secondary
Iconsvg
$icon-secondary
Dismissible iconsvg
$icon-secondary
SelectedTabbackground-color
$layer
*
border-top
$border-interactive
Labeltext-color
$text-primary
Iconsvg
$icon-primary
Dismissible iconsvg
$icon-primary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of selected and unselected dismissible contained tabs.

Examples of selected and unselected dismissible contained tabs.


Dismissible contained tab interactive state color


StateElementPropertyColor token
HoverTabbackground-color
$layer-accent-hover
*
Labeltext-color
$text-primary
Iconsvg
$icon-primary
Dismissible iconsvg
$icon-primary
Dismissible icon: selectedbackground-color
$layer-hover
*
Dismissible icon: unselectedbackground-color
$layer-accent-hover
*
FocusTabborder
$focus
DisabledLabeltext-color
$text-on-color-disabled
Iconsvg
$icon-on-color-disabled
Tabbackground-color
$button-disabled

* Denotes a contextual color token that will change values based on the layer it is placed on.

Unselected close hover, unselected hover, unselected focus, and disabled states for dismissible contained tabs.

Examples of unselected close hover, unselected hover, unselected focus, and disabled states for dismissible contained tabs.

Selected close hover and selected focus states for dismissible contained tabs.

Examples of selected close hover and selected focus states for dismissible contained tabs.

Vertical tab color

TypeElementPropertyColor token
UnselectedTabbackground-color
$layer
*
border-bottom, border-right, border-left
$border-subtle
*
Labeltext-color
$text-secondary
Extended backgroundbackground-color
$layer
*
border-right
$border-subtle
*
SelectedTabbackground-color
$layer
*
border-bottom
$border-subtle
*
border-left
$border-interactive
*
Labeltext-color
$text-primary
tab panelbackgroundbackground-color
$layer
*

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of selected and unselected vertical tabs.

Examples of selected and unselected vertical tabs.

Vertical tab interactive state color


StateElementPropertyColor token
HoverLabeltext-color
$text-primary
Tabbackground-color
$layer-hover
*
FocusTab: unselectedborder
$focus
Label: unselectedtext-color
$text-secondary
Tab: selectedborder
$focus
Label: selectedtext-color
$text-primary
DisabledLabeltext-color
$text-on-color-disabled
Examples of hover, unselected focus, selected focus, and disabled states for vertical tabs.

Examples of hover, unselected focus, selected focus, and disabled states for vertical tabs.


Typography

Tab labels should be set in sentence case, and should not exceed three words.

ElementFont-size (px/rem)Font-weightType token
Label: unselected14 / 0.875Regular / 400
$body-compact-01
Label: selected14 / 0.875SemiBold / 600
$heading-compact-01
Secondary label12 / 0.75Regular / 400
$label-01

Structure

Line tab structure

ElementPropertypx / remSpacing token
Tabheight40 / 2.5–
border-bottom2px–
widthauto-width–
margin-left1px–
Labelpadding-left, padding-right16 / 1
$spacing-05
padding-top, padding-bottom8 / 0.5
$spacing-03
Iconpadding-right16 / 1
$spacing-05
padding-left8 / 0.5
$spacing-03
svg16 x 16–
Scrollable iconsvg16 x 16–
Structure and spacing measurements for line tabs.

Structure and spacing measurements for line tabs | px / rem


Line tab icon-only modifier


ElementPropertypx / remSpacing token
Tab (md)height, width40 / 2.5–
svg16 x 16–
Tab (lg)height, width48 / 3–
svg20 x 20–
Structure and spacing measurements for line tabs in px and rem

Structure and spacing measurements for icon-only line tabs | px / rem

Dismissible line tab structure

ElementPropertypx / remSpacing token
Tabheight40 / 2.5–
border-bottom2px–
widthauto-width–
margin-left1px–
Labelpadding-left, padding-right16 / 1
$spacing-05
padding-top, padding-bottom8 / 0.5
$spacing-03
Dismissible iconpadding-right16 / 1
$spacing-05
padding-left8 / 0.5
$spacing-03
svg16 x 16–
Iconpadding-right8 / 0.5
$spacing-03
padding-left16 / 1
$spacing-05
svg16 x 16–
Structure and spacing measurements for dismissible line tabs without icons (top) and with icons (bottom).

Structure and spacing measurements for line tabs without icons (top) and with icons (bottom) | px / rem

Contained tab structure

ElementPropertypx / remSpacing token
Tabheight40 / 2.5–
border-top2px–
widthauto-width, grid–
Labelpadding-left, padding-right16 / 1
$spacing-05
Iconpadding-right16 / 1
$spacing-05
padding-left16 / 1
$spacing-05
svg16 x 16–
Tabborder-right1px–
Scrollable iconsvg16 x 16–
Scrollable buttonborder-right, border-left1px–
Structure and spacing measurements for contained tabs in px and rem

Structure and spacing measurements for contained tabs | px / rem


Contained tab icon-only modifier


ElementPropertypx / remSpacing token
Tab (lg)height, width48 / 3–
svg20 x 20–
Structure and spacing measurements for icon-only contained tabs in px and rem

Structure and spacing measurements for icon-only contained tabs | px / rem

Dismissible contained tab structure

ElementPropertypx / remSpacing token
Tabheight40 / 2.5–
border-top2px–
widthauto-width, grid–
Labelpadding-left, padding-right16 / 1
$spacing-05
Dismissible iconpadding-right16 / 1
$spacing-05
padding-left8 / .5
$spacing-03
svg16 x 16–
Iconpadding-right8 / .5
$spacing-03
padding-left16 / 1
$spacing-05
svg16 x 16–
Tabborder-right1px–
Structure and spacing measurements for dismissible contained tabs in px and rem

Structure and spacing measurements for dismissible contained tabs without icons (top) and with icons (bottom)| px / rem

Verical tab structure

ElementPropertypx / remSpacing token
Tabheight64 / 4–
border-left3 px–
Tab: unselectedborder-bottom, border-right1 px–
Tab: selectedborder-bottom1 px–
Labelpadding-left, padding-right16 / 1
$spacing-05
Extended backgroundborder-right1 px–
Structure and spacing measurements for vertical tabs in px and rem

Structure and spacing measurements for vertical tabs without overflow (left) and with overflow (right) | px / rem

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Edit this page on GitHub
Previous
Tabs: Usage
Next
Tabs: Code