Skip to main contentCarbon Design System

Tabs

Color

Line tabs

StateElementPropertyColor token
EnabledBackgroundbackground-colortransparent
Labeltext-color$text-secondary
Iconsvg$icon-secondary
Backgroundborder-bottom$border-subtle *
Scrollable iconsvg$icon-primary
Scrollable fadebackground-color8px, linear-gradient $background to 100% transparent
Scrollable backgroundbackground-color$background
SelectedLabeltext-color$text-primary
Iconsvg$icon-primary
Backgroundborder-bottom$interactive
Example of selected and enabled line tabs

Example of selected and enabled line tabs.


Interactive states


StateElementPropertyColor token
HoverBackgroundborder-bottom$interactive
Labeltext-color$text-primary
Iconsvg$icon-primary
Scrollable backgroundbackground-color$background-hover
ActiveScrollable backgroundbackground-color$layer-accent
FocusScrollable backgroundborder$focus
Focus-enabledLabeltext-color$text-secondary
Backgroundborder$interactive
Iconsvg$icon-secondary
Focus-selectedLabeltext-color$text-primary
Backgroundborder$interactive
Iconsvg$icon-primary
DisabledLabeltext-color$text-disabled
Iconsvg$icon-disabled
Backgroundbackground-colortransparent
Examples of hover, focus-enabled, focus-selected, and disabled states

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.

Contained tabs

StateElementPropertyColor token
EnabledBackgroundbackground-color$layer-accent *
Labeltext-color$text-secondary
Iconsvg$icon-secondary
Backgroundborder-right$border-strong *
Scrollable iconsvg$icon-secondary
Labeltext-color$text-primary
SelectedBackgroundbackground-color$layer *
Iconsvg$icon-primary
Backgroundborder-top$border-interactive

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

Examples of selected and enabled contained tabs

Examples of selected and enabled contained tabs.


Interactive states


StateElementPropertyColor token
HoverBackgroundbackground-color$layer-accent-hover *
Labeltext-color$text-primary
Iconsvg$icon-primary
Scrollable backgroundbackground-color$layer-accent-hover *
ActiveScrollable backgroundbackground-color$layer-accent-active *
FocusScrollable backgroundborder$focus
Focus-enabledLabeltext-color$text-secondary
Backgroundbackground-color$layer-accent *
Iconsvg$icon-secondary
Focus-selectedLabeltext-color$text-primary
Backgroundbackground-color$layer *
Iconsvg$icon-primary
DisabledLabeltext-color$text-disabled
Iconsvg$icon-disabled
Backgroundbackground-color$button-disabled
Borderborder-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.

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: enabled14 / 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 backgroundborder-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