Skip to main contentCarbon Design System

Toggle

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

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

Sizes

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

Toggle sizes | px / rem