Skip to main contentCarbon Design System

Content switcher

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

Color

Content switchers have two main enabled states: unselected and selected.

High contrast color

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

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

Example of default content switcher high contrast color

High contrast interactive state color


TypeStateElementPropertyColor token
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
*
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

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

Example of default content switcher high contrast interactive state color

Low contrast color

TypeElementPropertyColor token
UnselectedContainerbackground-color
$content-switcher-background
Texttext-color
$text-secondary
Iconsvg
$icon-secondary
Borderborder
$border-strong
*
Dividerborder
$border-strong
*
SelectedContainerbackground-color
$content-switcher-selected
Texttext-color
$text-primary
Iconsvg
$icon-primary

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

Example of default content switcher low contrast color

Low contrast interactive state color


TypeStateElementPropertyColor token
UnselectedHoverContainerbackground-color
$content-switcher-background-hover
Texttext-color
$text-primary
Iconsvg
$icon-primary
FocusBorderborder
$focus
DisabledContainerbackground-color
$content-switcher-background
Texttext-color
$text-disabled
Icontext-color
$icon-disabled
Borderborder
$border-disabled
Dividerborder
$border-disabled
SelectedFocusContainerborder
$focus
DisabledContainerbackground-color
$content-switcher-selected
Texttext-color
$text-disabled
Iconsvg
$icon-disabled
Borderborder
$border-disabled
Example of default content switcher low contrast interactive state color

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.

High contrast typography

ElementFont size (px/rem)Font weightType token
Text: unselected14 / 0.875Regular / 400
$body-compact-01
Text: selected14 / 0.875Regular / 400
$body-compact-01

Low contrast typography

ElementFont size (px/rem)Font weightType token
Text: unselected14 / 0.875Regular / 400
$body-compact-01
Text: selected14 / 0.875SemiBold / 600
$heading-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.

Default content switcher structure and spacing measurements

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

Icon 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
Default content switcher sizes | px / rem

Default content switcher sizes | px / rem

Icon content switcher sizes | px / rem

Icon content switcher sizes | px / rem

Feedback

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