Skip to main contentCarbon Design System

Toggle

Color

ElementPropertyColor token
Labeltext color$text-secondary
Toggle texttext color$text-primary
Off backgroundbackground-color$toggle-off
Off handlebackground-color$icon-on-color
On backgroundbackground-color$support-success
On handlebackground-color$icon-on-color
Checkmarkfill$support-success
Inactive, inactive hover, and active states for a toggle

Examples of inactive, inactive hover, and active states for a toggle

Interactive states

StateElementPropertyColor token
FocusToggleborder$focus
DisabledLabeltext color$text-disabled
Toggle texttext color$text-disabled
Toggle backgroundbackground-color$button-disabled
Toggle handlebackground-color$icon-on-color-disabled

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
Label12 / 0.75Regular / 400$label-01
Toggle text14 / 0.875Regular / 400$body-long-01

Structure

Small toggle

ElementPropertypx / remSpacing token
Toggle smallheight16 / 1
width32 / 2
Handleheight, width10 / 0.625
Labelmargin-top, margin-bottom16 / 1$spacing-05
Structure and spacing measurements for small toggle

Structure and spacing measurements for small toggle | px / rem

Medium toggle

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

Structure and spacing measurements for medium toggle | px / rem

Sizes

SizeHeight px / rem
Small (sm)16 / 1
Medium (md)24 / 1.5
Sizes for toggle

Toggle sizes | px / rem