Toggles

Three ways to switch between two choices. Every example here is the app’s real component, so tap them.

Component	Use for	Real examples
Toggle	Turning one setting on or off	Make admin, Add return flights?, Requires ticket, Reset the deadline
Segmented toggle	Picking one of two views, shown as icons	Carousel or list (Where, Stay), light or dark (Account)
Dashboard switch	Picking one of two labelled tabs	Tasks or Activity on the Dashboard

Toggle

On: the coral knob slides right, over a faded coral track.
Off: the knob slides left, over a grey track.
On a teal card, use tone="action-2": a white knob over a pale or dark green track, so it still stands out.
It doesn’t shrink when pressed. The knob’s slide is its feedback.
The tap area is 58 × 38px, bigger than the track you see.

An 80 × 40px green track with two icons. A pale circle slides between them over 300ms.
The chosen side’s icon turns coral. The other stays white.
The thumb is pale teal in light mode and solid green in dark mode.
Each side has a label for screen readers (“Carousel view”, “List view”).

A full-width pill in the Secondary button colours. A coral half slides to whichever tab is chosen, over 300ms.
The chosen label is white (near-black in dark mode). The other is Action Dark (Action in dark mode).

Part	Toggle	Segmented toggle	Dashboard switch
Size	58 × 38px tap area, 34 × 14px track, 20px knob	80 × 40px, 40px thumb	Full width, fully rounded
On / chosen	Coral knob right, faded coral track	Coral icon on a pale thumb	Coral half, white label
Off / other	Coral knob left, grey track	White icon	Dark coral label
Motion	The knob slides	The thumb slides, 300ms	The coral half slides, 300ms

On or off: Toggle. One of two views: Segmented toggle

✓

List view

A Toggle switches one setting on or off. Picking between two views (carousel or list) is a segmented toggle.

Toggle is a real switch named by the words next to it: “Make admin, switch, off”. Its label is required, so a new one can’t be added without a name.
Segmented toggle: each side is labelled (“Carousel view”, “List view”) and says which is chosen.
Dashboard switch: a labelled group (“Dashboard view”), and each tab says whether it’s pressed.