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 white 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-color$icon-disabled
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
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$icon-disabled
Borderborder-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.

Enabled, hover, active, and focus states for contained scrollable tabs.

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

Typography

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

ClassFont-size (px/rem)Font-weightType token
.bx--tabs__nav-link:selected14 / 0.875SemiBold / 600$heading-01
.bx--tabs__nav-link14 / 0.875Regular / 400$body-long-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