Skip to main contentCarbon Design System

Content switcher

The following page documents visual specifications such as color, typography, structure, and size.

Color

Content switcher includes two default-enabled content states: selected and unselected with the selected state using a high contrast color.

TypeElementPropertyColor token
SelectedContainerbackground-color
$layer-selected-inverse
Label texttext-color
$text-inverse
Iconsvg
$icon-inverse
UnselectedContainerbackground-colortransparent
Label texttext-color
$text-secondary
Iconsvg
$icon-primary
Borderborder
$border-inverse
Dividerborder
$border-subtle
*

  • Denotes a contextual color token that will change values based on the layer it is placed on.

Example of default content switcher enabled state

Interactive states

Content switcher has three interactive states—hover, focus, and disabled. Hover states only apply to the unselected state.

TypeStateElementPropertyColor token
SelectedFocusContainerbackground-color
$layer-selected-inverse
Label texttext-color
$text-inverse
Iconsvg
$text-inverse
Borderinner-border
$focus-inset
DisabledContainerbackground-color
$layer-selected-disabled
Label texttext-color
$text-disabled
Icontext-color
$text-disabled
UnselectedHoverContainerbackground-color
$background-hover
Label texttext-color
$text-primary
Iconsvg
$icon-primary
Borderborder
$border-inverse
FocusContainerbackground-colortransparent
Label texttext-color
$text-secondary
Iconsvg
$icon-primary
Borderborder
$focus
DisabledContainerbackground-colortransparent
Label texttext-color
$text-disabled
Icontext-color
$icon-disabled
Borderborder
$border-disabled
Dividerborder
$border-subtle
*

  • Denotes a contextual color token that will change values based on the layer it is placed on.

Example of default content switcher interactive 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
Label text14 / 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.

ElementPropertypx / remSpacing token
Containercorner radius4px–
Label textpadding-left, padding-right16 / 1
$spacing-05
Icon (sm)padding-left, padding-right8 / 0.5
$spacing-03
Icon (md)padding-left, padding-right12 / 0.75
$spacing-04
Icon (lg)padding-left, padding-right14 / 0.875–
Dividerborder1px–

Default structure

The width of a text container is determined by the length of the longest label text within its content switcher.

Text content switcher structure and spacing measurements

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

Icon-only structure

The width of an icon container is determined by the fixed size within its content switcher.

Icon content switcher structure and spacing measurements

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

Size

There are three content switcher sizes—small (32px), medium (40px), and large (48px).

ElementSizeHeight (px / rem)
ContainerSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
IconSmall (sm)16 / 1
Medium (md)16 / 1
Large (lg)20 / 1.25
Text only content switcher sizes | px / rem

Text only content switcher sizes | px / rem

Icon content switcher sizes | px / rem

Icon only content switcher sizes | px / rem

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.