VoiceInputButton
v1.0.0Microphone trigger with integrated waveform animation. States: idle, listening (agency red), processing (temporal blue), done, error. Waveform bars animate to real or simulated audio amplitude while listening; freeze and pulse during STT processing.
import { VoiceInputButton } from "@danagraph/design-system/patterns"Props
| Prop | Type | Default | Description |
|---|---|---|---|
state | "idle" | "listening" | "processing" | "done" | "error" | "idle" | Current voice capture state. |
amplitudes | number[] | — | 7 amplitude values 0–1 from real audio analysis. Falls back to simulation when omitted. |
onStart | () => void | — | Called when user clicks to start recording. |
onStop | () => void | — | Called when user clicks to stop recording. |
errorMessage | string | — | Error message shown in error state. |
disabled | boolean | false | Disable the button entirely. |
label | string | — | Accessible label override. |
state"idle" | "listening" | "processing" | "done" | "error"Default "idle"Current voice capture state.
amplitudesnumber[]Default —7 amplitude values 0–1 from real audio analysis. Falls back to simulation when omitted.
onStart() => voidDefault —Called when user clicks to start recording.
onStop() => voidDefault —Called when user clicks to stop recording.
errorMessagestringDefault —Error message shown in error state.
disabledbooleanDefault falseDisable the button entirely.
labelstringDefault —Accessible label override.
This component was designed to express:
Explore Related
Live speech-to-text output with per-segment confidence signaling. Low-confidence words are underlined in gold (validation) with a confidence pill. Temporal blue border while transcribing, gold for low-confidence final output, error red for STT failure.
Ambient ring indicator for voice pipeline state. Sizes: sm/md/lg. States: idle (muted), listening (agency red pulse), processing (temporal blue spin), speaking (green pulse — agent delivering output), error, muted. Designed for headers, toolbars, and conversation panels.
Compact audio playback with waveform visualization. Played portion shown in temporal blue; unplayed in border-structure. Click waveform to seek. Supports controlled and uncontrolled modes. States: idle, playing, paused, loading (skeleton bars), error.
Streaming LLM output with temporal cursor. Displays content immediately — no fake simulation. StreamingDot disappears instantly on completion.