Toggle

Color

ClassPropertyColor token
.bx--labeltext color$text-02
.bx--toggle__text--lefttext color$text-01
.bx--toggle__appearance:beforebackground-color$ui-04
.bx--toggle__appearance:afterbackground-color$ui-03
.bx--toggle:checked +
.bx--toggle__appearance:before
background-color$support-02
.bx--toggle:checked +
.bx--toggle__appearance:after
background-color$icon-03
.bx--toggle:checkedbackground-color$support-02
.bx--toggle__checkfill$support-02
Inactive, inactive hover, and active states for a toggle

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

Interactive states

ClassPropertyColor token
.bx--toggle__appearance:focusborder$focus
.bx--label:disabledtext color$disabled-02
.bx--toggle__text--left:disabledtext color$disabled-02
.bx--toggle:disabled +
.bx--toggle__appearance:before
background-color$disabled-01
.bx--toggle:disabled +
.bx--toggle__appearance:after
background-color$disabled-02

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.

ClassFont-size (px/rem)Font-weightType token
.bx--label12 / 0.75Regular / 400$label-01
.bx--toggle__text--left14 / 0.875Regular / 400$body-long-01

Structure

Toggle

ClassPropertypx / remSpacing token
.bx--toggle__appearancewidth48 / 3
.bx--toggle__appearanceheight24 / 1.5
.bx--toggle__appearance:afterheight, width18 / 1.25
.bx--toggle__labelmargin-top, margin-bottom16 / 1$spacing-05
.bx--toggle__text--leftmargin-left8 / 0.5$spacing-03
Structure and spacing measurements for toggle

Structure and spacing measurements for toggle | px / rem

Small toggle

ClassPropertypx / remSpacing token
.bx--toggle--smallheight16 / 1
.bx--toggle--smallwidth32 / 2
.bx--toggle--small +
.bx--toggle__appearance:after
height, width10 / 0.625
.bx--toggle--smallmargin-top, margin-bottom16 / 1$spacing-05
Structure and spacing measurements for small toggle

Structure and spacing measurements for small toggle | px / rem