Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Tabs

Color

ClassPropertyColor token
.bx--tabs__nav-linktext color$text-02
.bx--tabs__nav-itemborder-bottom$ui-03
.bx--tabs__nav-link:selectedtext color$text-01
.bx--tabs__nav-item--selectedborder-bottom$interactive-04

Interactive states

ClassPropertyColor token
.bx--tabs__nav-link:hovertext color$text-01
.bx--tabs__nav-item:hoverborder-bottom$ui-04
.bx--tabs__nav-item:focusborder$focus

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

ClassPropertypx / remSpacing token
.bx--tabs__nav-itemborder-bottom2px–
.bx--tabs__nav-linkpadding-left, padding-right16 / 1$spacing-05
.bx--tabs__nav-linkpadding-top, padding-bottom8 / 0.5$spacing-03
bx--tabs__nav-itemmargin-left1px-
Structure and spacing measurements for tabs

Structure and spacing measurements for tile | px / rem