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

Documentation

Checklist

Documentation

Checklist

Documentation

Checklist

0 out of

0 out of

3

3

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