Toggle
Components
A toggle is a switch-like control that allows users to quickly alternate between two opposing states (on/off) with a single click or tap.
Checklist
Reset
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
Transition
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