SpeechStateIndicator
stablev1.0.0Ambient 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.
import { SpeechStateIndicator } from "@nodus/design-system/patterns"Props
| Prop | Type | Default | Description |
|---|---|---|---|
state | "idle" | "listening" | "processing" | "speaking" | "error" | "muted" | "idle" | Current speech pipeline state. |
size | "sm" | "md" | "lg" | "md" | Ring size: sm=16px, md=24px, lg=32px. |
showLabel | boolean | false | Show state label text alongside the ring. |
label | string | — | Override the default state label text. |
onClick | () => void | — | Click handler — renders as a button when provided (e.g. to toggle mute). |
state"idle" | "listening" | "processing" | "speaking" | "error" | "muted"Default "idle"Current speech pipeline state.
size"sm" | "md" | "lg"Default "md"Ring size: sm=16px, md=24px, lg=32px.
showLabelbooleanDefault falseShow state label text alongside the ring.
labelstringDefault —Override the default state label text.
onClick() => voidDefault —Click handler — renders as a button when provided (e.g. to toggle mute).
This component was designed to express:
Explore Related
Microphone 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.
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.
Non-intrusive background activity indicator. Shows agents working without demanding attention. Three variants: dot (toolbar), strip (bottom bar), tray (collapsible side panel).
Colored dot indicating idle, active, pending, error, or completed state