Toggle

Preview

Default, active. A 44 by 28 track with a 22 pt handle, centered in a 52 by 44 frame, so the thing you can hit is bigger than the thing you can see. Click it.

The 52 by 44 frame is the target and the control inside it is 44 by 28, sitting 4 from each side and 8 from the top and bottom. The handle is a 22 circle inset 3, so it sits at 3 when off and 19 when on, 16 of travel.

Two shadows sit under it, both black, one at 4 percent and one at 1.

Source: the Toggle set of the Appetite UI Figma file, read on October 2, 2026.

Which states does Toggle have?

Four: Default, Pressed, Focused and Disabled, each off or on. The file has no Hover state, because a finger does not hover, so a pointer hover moves these specimens toward Pressed. Pressed shifts the track while the finger is down, and Focused draws the ring for keyboard and switch control.

Focused is the focusRing/brand effect style, a 2 pt gap in the surface color and then a 2 pt ring in brand/base, drawn around the track. The frame is 52 by 44 so the ring has room.

Pressed moves each fill one step along its own ramp: bg/sub-200 when off, brand/pressed when on.

Disabled off is bg/soft-100 with no handle shadow. Disabled on keeps brand/base at 40 percent opacity, so a disabled switch still shows which way it is set.

Eight variants, State by Active, no holes. Source: component set 216:449 of the Appetite UI Figma file, read on October 2, 2026.

Label

The label is its own component, so the track stays a track. Align puts it on either side, and the description can be switched off. Each row is one switch: click the text or the track.

The row is 340 by 48: the 52 wide Toggle, 16 of gap, then 272 of text. The height comes from the text, 28 for the title plus 20 for the description at 14/20, so switching Show Description off takes the row to 44, the height of the Toggle frame.

Align swaps the order of the two children.

Properties

Two component sets: Toggle, the track, and _Toggle Label, the row that carries it.

Toggle is eight variants of State by Active and carries no text. _Toggle Label is two variants of Align and holds Label, Description and Show Description.

The underscore keeps _Toggle Label out of the published library, so copy the row from the Toggle page of the file when you need it.

Tokens

Every value the toggle reads, resolved through its aliases to the primitive underneath.

bg/sub-200 is the next step along the gray ramp and brand/pressed is a step darker than brand/base in both modes, so pressing moves the control forward.

The handle reads static/static-white-0, so it stays white in dark mode.

How does Toggle differ on iOS and Material 3?

Appetite UI Toggle keeps one shape on both platforms: a 44 by 28 track in a 52 by 44 frame. The native switches live on the iOS and Material 3 pages of the file.

The minimum touch target is 44 pt on iOS and 48 dp on Material 3, set by platform/min-touch-target in the Platform collection.

The 52 by 44 frame meets the iOS minimum on both axes. On Android, add 4 dp of hit area in code.

Guidelines

If a change needs a Save step, use Checkbox instead. A toggle names a state, so Weekly digest is right and Turn on weekly digest is not.

Make the whole label row tappable in code, because the file draws only the 52 by 44 frame as the target.