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.

ElementPropertyColor token
Unselected buttonbackground-colorTransparent
text color$text-secondary
svg$icon-primary
border$border-inverse
Selected buttonbackground-color$layer-selected-inverse
text color$text-inverse
svg$icon-inverse
Dividerborder$border-subtle

Interactive states

Hover states only apply to unselected buttons.

StatePropertyColor token
Hoverbackground-color$background-hover
text color$text-primary
svg$icon-primary
Focusborder$focus
inner border$focus-inset
Disabledbackground-colortransparent
text color$text-disabled
svg$icon-disabled
border$border-disabled
Example of default content switcher states

Typography

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

ElementFont-size (px/rem)Font-weightType token
Label14 / 0.875Regular / 400$body-compact-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.

ElementPropertypx / remSpacing token
Containercorner radius4px
Dividerborder1px
Button labelpadding-left, padding-right16 / 1$spacing-05
Content switcher structure and spacing measurements

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

Icon variant

ElementPropertypx / remSpacing token
Tab (sm)height, width32 / 2
svg16 x 16
paddingcentered
Tab (md)height, width40 / 2.5
svg16 x 16
paddingcentered
Tab (lg)height, width48 / 3
svg20 x 20
paddingcentered
Structure and spacing measurements for icon content switcher in px and rem

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

Sizes

SizeHeight px / rem
Small (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Sizes for content switcher

Content switcher sizes | px / rem