🎛

Toggles

Component

Features

Each visible item to be shown on this page.

Context

Information on what the toggle will do, and what each state represents

⭐️ A toggle should always be turning a function on or off, not between two opposing or alternative versions of a function

⭐️ Consider toggles for straightforward decisions that have low risk implications when turning on and off

States

Contrasting visual states to represent inactive and active

⭐️ Utilise a brand colour for your active state to stand out to the user

⭐️ Keep the inactive state simple and minimal for further contrast

⭐️ Implement states consistently across product

Animation

A clear visual of the toggle switching between different states

States

The way a component can change based on interaction.

Default

Function is disabled

Active

Function is enabled

Disabled

Toggle state has been set and can not be changed