Solaris Design System

Toggles

Toggles are used to switch between one item to another, usually on or off.

States Emotive
Switch 48px x 24px
Dot: 16px
Padding: 4px 		Productive
Switch 48px x 24px
Dot: 16px
Padding: 4px
:enabled Enabled toggle emotive theme light Enabled toggle emotive theme dark Enabled toggle productive theme light Enabled toggle productive theme dark
:off Off toggle emotive theme light Off toggle emotive theme dark Off toggle productive theme light Off toggle productive theme dark
:hover Hover toggle emotive theme light Hover toggle emotive theme dark Hover toggle productive theme light Hover toggle productive theme dark
:focus Focus toggle emotive theme light Focus toggle emotive theme dark Focus toggle productive theme light Focus toggle productive theme dark
:active Active toggle emotive theme light Active toggle emotive theme dark Active toggle productive theme light Active toggle productive theme dark
:disabled Disabled toggle emotive theme light Disabled toggle emotive theme dark Disabled toggle productive theme light Disabled toggle productive theme dark
:skeleton Skeleton toggle emotive theme light Skeleton toggle emotive theme dark Skeleton toggle productive theme light Skeleton toggle productive theme dark
:label-on Label-on toggle emotive theme light Label-on toggle emotive theme dark Label-on toggle productive theme light Label-on toggle productive theme dark
:label-off Label-off toggle emotive theme light Label-off toggle emotive theme dark Label-off toggle productive theme light Label-off toggle productive theme dark

Usage

Toggles are used to quickly switch between two states. Often used for “on/off” switches.

They are used for binary actions that results into immediate switch.

An example of a toggle is the theme switcher that we are currently using in Solaris at the top right corner of the site.