Skip to main content


.bx--content-switcher-btn.bx--content-switcher--selected:hoverbackground & border color$hover-primary#30588c


Content switchers have two states: selected and non-selected. Selected states are a solid color. There must always be only one selected state, no more, no less. Unselected options have a 1px border with no fill.


Content switcher text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. The text should not exceed three words.

ClassFont-size (px/rem)Font-weightType style
.bx--content-switcher-btn14 / 0.875Normal / 400-


Content switchers must have at least two options for the user to choose from. Each container that makes up the content switcher is equal in size. The width of a container is determined by the length of the longest container option text plus the 32 px / 2rem on both sides of the text.

ClassPropertypx / remSpacing token
.bx--content-switcherheight40 / 2.5-
border, border-left,
.bx--content-switcher-btnpadding-left, padding-right32 / 2$spacing-xl
_Structure and spacing measurements for content switcher | px / rem_