baseline grid

Toggle

Default

A toggle is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips the switch”. They are commonly used for “on/off” switches.

:enabled (on)
:hover (on)
:focus (on)
:disabled (on)
:enabled (off)
:hover (off)
:focus (off)
:disabled (off)

Toggle build:

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Toggle with label

You may need to add a label to the toggle to further emphasis which state it is in. The label should always appear to the right of the toggle and be one word.
Label text: 14px Rubik Bold

Small toggle

A small toggle is available where space is compromised, but should only be used in extreme cases.