Voice Pill

Mic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or toggled, then relaxes back into the mic on release; simulated voice by default, real microphone as an opt-in.

Default

Tap the mic to latch it, or press and hold. While held, slide left to cancel. The level is simulated until you switch the signal to the microphone.

Customize

Accent

Icon

Background

Size40px

Shape

Reach12px

Show TimeWaveformSlide To Cancel

Cancel Distance64px

Attack40ms

Release240ms

Sensitivity1

Quiet Height0.1

Open200ms

Press Scale0.95

Mode

Hold After300ms

Signal

Disabled

API Reference

VoicePill

Prop	Type	Default	Description
`accentColor`	`string`	`'#f5f5f5'`	The waveform, the clock and the stop mark.
`iconColor`	`string`	`'#a1a1aa'`	The mic at rest, and the hover wash.
`background`	`string`	`'#27272a'`	The capsule surface.
`size`	`number`	`28`	Footprint in px. The icon, the stop mark and the clock scale with it.
`shape`	`'pill' \| 'rounded'`	`'pill'`	A circle that opens into a capsule, or a rounded square.
`reach`	`number`	`8`	The room the capsule leaves before the waveform, in px.
`showTime`	`boolean`	`true`	An elapsed clock in the capsule, which grows to the left to hold it.
`waveform`	`boolean`	`true`	A history of the level scrolling through the capsule, past the clock.
`slideToCancel`	`boolean`	`true`	While held, sliding left drags the capsule contents along and reveals Cancel. Crossing the distance scatters the bars and stops without a result.
`cancelDistance`	`number`	`64`	How far left a held pointer slides before it cancels, in px.
`attack`	`number`	`40`	How fast the level rises to a louder signal, in ms.
`release`	`number`	`240`	How long the level hangs after the sound drops, in ms.
`sensitivity`	`number`	`1`	Gain on the signal before the envelope.
`floor`	`number`	`0.1`	Waveform bar height when silent, as a fraction of its box.
`openDuration`	`number`	`200`	The capsule open and close, in ms.
`pressScale`	`number`	`0.95`	Scale of the button while a pointer is down.
`mode`	`'auto' \| 'hold' \| 'toggle'`	`'auto'`	Auto: a tap latches, a hold stops on release. Hold: release always stops. Toggle: release never stops.
`holdAfter`	`number`	`300`	In auto, the press length after which a release stops instead of latching, in ms.
`reactive`	`'simulated' \| 'mic'`	`'simulated'`	What drives the level. Mic asks for microphone permission on the first press and stops if it is refused.
`disabled`	`boolean`	`false`	Dimmed and inert. A listening pill stops.
`ariaLabel`	`string`	`'Dictate'`	Accessible name. The state is carried by aria-pressed.

Event	Description
`start`	Listening began. The payload is { source } with the requested source.
`stop`	Listening ended. The payload is { reason, duration }; reason is release, tap, key, escape, blur, cancel, disabled, mic-denied or unmount, duration in ms.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Space` + `Enter`	Starts or stops listening.
`Escape`	Stops listening.

A native button with aria-pressed. Listening stops when the window loses focus or the tab is hidden during a press.
With prefers-reduced-motion the capsule, bars and glyph only fade.

Thought Line Wake Slider