Skip to main contentCarbon Design System

Content switcher

Color

Content switchers have two main states: selected and unselected. By default, content switcher buttons are unselected with the selected state using a high contrast color.

ClassPropertyColor token
.bx--content-switcher-btnbackground-colortransparent
.bx--content-switcher-btntext color$text-secondary
.bx--content-switcher-btnborder$border-inverse
--selectedbackground-color$layer-selected-inverse
--selectedtext color$text-inverse
:afterdivider$border-subtle

Interactive states

Hover states only apply to unselected buttons.

StatePropertyColor token
:hoverbackground-color$background-hover
:hovertext color$text-primary
:focusborder$focus
:disabledbackground-colortransparent
:disabledtext color$text-disabled
:disabledborder$border-disabled
Example of content switcher states

Typography

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.875Regular / 400$body-short-01

Structure

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 16 px / 1rem on both sides of the text.

ClassPropertypx / remSpacing token
.bx--content-switchercorner radius4px
:afterdivider1px
.bx--content-switcher-btnpadding-left, padding-right16 / 1$spacing-05

Sizes

SizeHeight px / rem
Small (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Content switcher structure and spacing measurements

Structure and spacing measurements for the default size content switcher | px / rem