Context
Explaining what the toggle will do
βοΈ A toggle should always be turning a function on or off, not between two opposing versions of a function e.g. hot or cold
βοΈ Consider toggles for straightforward decisions that have low risk implications
Animation
A clear visual change of the toggle switching between different states
State
How the button changes based on the interaction, examples below
βοΈ Contrast active and inactive with brand colour for active and keeping the inactive muted
Default
Toggle is off
Active
Toggle is on
Disabled
Toggle has been set and can not be changed