VoiceMock

Segmented Toggle

The pill-shaped either/or switch used for the language choice in the landing navbar, on /setup and in this header. It existed three times as hand-written markup before it was a component, and the copies had already drifted apart in size — see the note on drift below.

Both tones

One size everywhere: text-xs (12px), a step below the 14px nav links it sits next to. `tone` covers the only contextual difference — `translucent` for the sticky navbar it has to show through, `solid` for a card or page background.

Prop	Type	Default	Description
options	{ value: T; label: string }[]	—	Choices in display order. `label` is what the user reads, `value` is what comes back from onChange.
value	T	—	Currently selected value.
onChange	(value: T) => void	—	Called with the newly selected value.
label	string	—	Accessible name for the group — required, the control has no visible heading of its own.
tone	'solid' \| 'translucent'	'solid'	solid on a card or page background; translucent over the sticky navbar.
className	string	—	Layout only — margins and responsive visibility. Not for restyling the pill.

States

Selected, unselected, and unselected on hover. The group carries role="group" with an accessible name, and each option reports aria-pressed — the control has no visible label of its own.

value="ua"

value="en"

What it replaced

Left: what the landing navbar rendered. Right: what /setup and this header rendered. Nobody chose the difference — it is what three hand-written copies of the same eight classes turn into. It stayed invisible while cn() was discarding text-micro and the navbar fell back to the inherited 16px; fixing that made the gap visible instead of hiding it.

UAEN

px-2 py-0.5 · text-micro (10px)

UAEN

px-3 py-1 · text-xs (12px)

Need a design system like this?

I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.