Skip to main contentCarbon Design System

Tabs

Color

Line tabs

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
Example of selected and unselected line tabs

Example of selected and unselected line tabs.


Interactive states


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, focus-unselected, focus-selected, and disabled states

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


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
FocusButtonborder$focus
Examples of enabled, hover, active, and disabled states for scrollable line tabs

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

Contained tabs

TypeElementPropertyColor token
UnselectedTabbackground-color$layer-accent *
border-right$border-strong *
Labeltext-color$text-secondary
Iconsvg$icon-secondary
SelectedTabbackground-color$layer *
border-top$border-interactive
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.


Interactive states


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

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

Hover, focus-enabled, focus-selected, and disabled states for contained
tabs.

Hover, focus-enabled, focus-selected, and disabled states for contained tabs.


Scrollable states


StateElementPropertyColor token
EnabledIconsvg$icon-secondary
Buttonbackground-color$layer-accent *
HoverButtonbackground-color$layer-accent-hover *
Iconsvg$icon-primary
ActiveButtonbackground-color$layer-accent-active *
FocusButtonborder$focus
Enabled, hover, active, and focus states for contained scrollable tabs.

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.

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

Structure

Line tabs

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


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

Contained tabs

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


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