Skip to main contentCarbon Design System

Toggle

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

Color

ElementPropertyColor token
Label texttext color$text-secondary
Action texttext color$text-primary
Background (off)background-color$toggle-off
Handle (off)background-color$icon-on-color
Background (on)background-color$support-success
Handle (on)background-color$icon-on-color
Checkmarkfill$support-success
On and off toggle states

On and off toggle states

Interactive states

The default and small toggle can be switched on and off across focus, disabled, and read-only states.

StateElementPropertyColor token
FocusToggleborder$focus
DisabledLabel texttext color$text-disabled
Action texttext color$text-disabled
Backgroundbackground-color$button-disabled
Handlebackground-color$icon-on-color-disabled
Checkmarkinner fillbutton-disabled
Read-onlyLabel texttext color$text-secondary
Action texttext color$text-primary
Backgroundbackground-colortransparent
Borderborderborder-subtle *
Handlebackground-color$icon-primary

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

Interactive toggle states

Interactive toggle states.

Typography

Toggle labels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized, and no more than three words.

ElementFont-size (px/rem)Font-weightType token
Label text12 / 0.75Regular / 400$label-01
Action text14 / 0.875Regular / 400$body-compact-01

Structure

Default toggle

ElementPropertypx / remSpacing token
Togglewidth48 / 3
height24 / 1.5
Handleheight, width18 / 1.25
Label textmargin-top, margin-bottom16 / 1$spacing-05
Action textmargin-left8 / 0.5$spacing-03
Structure and spacing measurements for default toggle

Structure and spacing measurements for default toggle | px / rem

Small toggle

ElementPropertypx / remSpacing token
Togglewidth32 / 2
height16 / 1
Handleheight, width10 / 0.625$spacing-03
Action textmargin left8 / 0.5$spacing-03
Structure and spacing measurements for small toggle

Structure and spacing measurements for small toggle | px / rem

Size

SizeHeight px / rem
Small (sm)16 / 1
Default24 / 1.5
Sizes for toggle

Toggle sizes | px / rem

Feedback

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