Toggle · 0nlyType

Example

fermata

tenuto

aside

guides

fermata, rest

fermata, pointed at

fermata, held

tenuto, rest

tenuto, pointed at

tenuto, held

aside, rest

aside, pointed at

aside, held

guides, rest

guides, pointed at

guides, held

Focus

Disabled

Usage

toggle-example.tsx

import { Toggle } from "@/components/ui/toggle"export default function Example() {return (<div className="ot-mp grid justify-items-start gap-x-10 gap-y-12 sm:grid-cols-2"><div className="grid justify-items-start gap-4"><span className="ot-label">fermata</span><Toggle>Pin this note</Toggle></div><div className="grid justify-items-start gap-4"><span className="ot-label">tenuto</span><Toggle variant="tenuto">Keep a copy</Toggle></div><div className="grid justify-items-start gap-4"><span className="ot-label">aside</span><Toggle variant="aside" note="muted">Mute replies</Toggle></div><div className="grid justify-items-start gap-4"><span className="ot-label">guides</span><Toggle variant="guides">Show guides</Toggle></div></div>)}

Contract

Underneath: Radix Toggle.
Anatomy: <button class="ot-toggle" data-variant="fermata | tenuto | aside | guides" type="button" aria-pressed="false"> holding Word (aside adds an aria-hidden  after the word). The label shares its grid cell with an italic copy of itself (::after, from data-text, hidden from screen readers), so the button is always as wide as its wider state and nothing beside it moves. A label that holds elements has no copy and turns italic in place.
Held, the word is yours, so it turns italic. The marks are the button's own ::before and ::after, drawn from two registered numbers (--ot-toggle-draw for the pencil sketch, --ot-toggle-ink for the tenuto's pen), so the whole move is a transition. Every stroke passes through: it draws from the start and leaves toward the end, mirrored right to left.
One box: both variants keep room for the arc above (0.8em) and the line below (--y, 0.3em), so a fermata and a tenuto side by side stand on one baseline, and the word stands at the start of its box, in line with its label.
fermata (default): the sign for a note held longer than written. Pointing sketches the arc over the word in pencil from its start foot. Held, the arc inks at stroke width, the dot lands under it with spiccato, and the word leans into the italic: the roman shears forward as it fades, and the italic arrives upright and settles into its slant. Pressed, the sign comes down toward the word.
The roman and its italic copy start at one edge but aren't one width, so script reads both (--ot-toggle-r, --ot-toggle-i) and fermata, aside and guides centre or end their marks on the face you see (--w); a mark centred on the button sat a few px off the word. Fonts arriving and resizes put the marks straight there (data-still); only a press moves them.
tenuto: the line under a note held its full value. Pointing sketches it under the word in pencil. Held, a pen (a dot, seen only while it moves) runs along the line from the start, inking it, and behind the pen the word is rewritten in the italic. Released, the pen passes again: the ink leaves ahead of it and the roman comes back behind it. The line, the pen and both masks read one number, so they never part.
aside: after "It has to be design.", whose tiny notes hang on hairline arrows beside the words. Pointing sketches a hairline beside the word in pencil. Held, it inks, an arrowhead lands on its end against the word, and a small note in our voice (note, "on" by default) is written at its tail on the word's baseline. The note and arrow take no room, so nothing beside the word moves; the arrow points back at the word, mirrored right to left.
guides: after Paul Rand's "design", whose letters stand on a dotted construction grid. Pointing sketches the word's baseline in dots from the start. Held, the x-height line is drawn in dots from the end, the two pass through each other across the word, and it leans into the italic between them: the word shown standing on the lines it is set on.
States: rest, hover (the pencil sketch), focus (the accent outline), held, disabled (pencil at 55%; nothing sketches), each for all four variants. Forced colours: the marks use ButtonText, the pencil sketch, the dots and the aside's arrow at rest GrayText.
Keyboard: native button; Space and Enter hold and release. The aside's note is aria-hidden: aria-pressed already says the word is held.

Props

Props of Toggle
Prop	Type	Default	What it does
`variant`	`"fermata" \| "tenuto" \| "aside" \| "guides"`	`"fermata"`	The sign a held word wears. fermata: pointing sketches an arc over the word from its start foot; held, the arc inks, a dot lands under it, and the word leans into the italic. tenuto: pointing sketches a pencil line under the word; held, a pen runs along it from the start, inking the line and rewriting the word in the italic as it passes, and released, it passes again and gives the word back. aside: pointing sketches a hairline arrow beside the word; held, it inks, its head lands against the word, and a small note in our voice (note) is written at its tail, on the word's baseline. guides: pointing sketches the baseline under the word in dots; held, the x-height line is drawn from the other side, the two pass through the word, and it leans into the italic between them. fermata, aside and guides centre and end their marks on the face showing, roman or italic.
`note`	`string`	`"on"`	aside only: the note written beside the held word, a word or two in our voice ("muted", "pinned"). It's decoration; aria-pressed already says the word is held.
`pressed / defaultPressed`	`boolean`		Whether the word is held. Controlled or not.
`onPressedChange`	`(pressed: boolean) => void`		Called when the word is pressed or released.
`disabled`	`boolean`	`false`	Dimmed to pencil; no mark sketches.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Toggle	The fermata sign; the score's tenuto	Held, the word turns italic under the arc and dot, or behind a pen along the line
Aside toggle	"It has to be design."	A tiny note hung beside the held word on a hairline arrow
Guides toggle	Paul Rand, "design"	The held word shown on its dotted baseline and x-height

How it moves

How it moves
Component	Articulation	What moves
Toggle	Pencil, then ink	The arc sketches from its start foot on hover; held, it inks, the dot lands and the word leans into the italic
Tenuto toggle	Written	The line sketches on hover; held, a pen inks it and rewrites the word in the italic behind it, and releasing writes it back
Aside toggle	Pencil, then ink	The hairline sketches beside the word; held, it inks, the head lands against the word and the note is written in at its tail
Guides toggle	Pass-through	The baseline sketches in dots from the start; held, the x-height line draws from the end, they pass through the word and it leans into the italic