Skip to main content

Color

ClassPropertySCSSHEX
.bx--toggle__appearance:afterbackground-color$ui-01#ffffff
.bx--toggle__appearance:afterborder$ui-05#5a6872
.bx--toggle--small + .bx--toggle__label .bx--toggle__appearance:beforeborder$ui-05#5a6872
.bx--toggle:checked + .bx--toggle__label .bx--toggle__appearance:afterbackground-color, border$brand-01#3d70b2
.bx--toggle__checkfill$brand-01#3d70b2
.bx--toggle__labelcolor$text-01#152935

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

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-weightText style
.bx--label14 / 0.875Normal / 600.bx--type-zeta
.bx--toggle__text--left
.bx--toggle__text--right
14 / 0.875Normal / 400-

Structure

Toggle

ClassPropertypx / remSpacing token
.bx--toggle__appearancewidth48 / 3-
.bx--toggle__appearance:afterheight, width24 / 1.5-
.bx--toggle__appearance:afterborder2px-
.bx--toggle__labelmargin-top, margin-bottom16 / 1$spacing-md
.bx--toggle__text--left
.bx--toggle__text--right
margin-right, margin-left8 / 0.5$spacing-xs

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__label .bx--toggle__appearance:afterheight, width10 / 0.625-
.bx--toggle--smallmargin-top, margin-bottom16 / 1$spacing-md

Structure and spacing measurements for small toggle Structure and spacing measurements for Small Toggle | px / rem