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.
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.
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn