MicButton

Round microphone button for the composer toolbar. It never touches the microphone: you record, and you move state through idle, requesting, listening, processing, error and unsupported. onToggle is called on click in idle, requesting, listening and error; processing and unsupported ignore clicks. While listening, level from 0 to 1 scales a ring around the button through a CSS variable, so only the button re-renders; under prefers-reduced-motion the ring stays still at the size of the button. The button keeps one accessible name, labels.dictation, and reports listening through aria-pressed and waiting through aria-busy; in requesting, processing, error and unsupported the state, or the error text, is also its accessible description. A tooltip names the state for pointer users.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
States
API reference
Prop
Type
Required
state
MicState
Yes
Controlled state; the button never touches the microphone itself
level
number
No
Input level from 0 to 1 that drives the ring while `listening`
onToggle
() => void
No
Called on click in `idle`, `requesting`, `listening` and `error`; the host moves `state`
error
string
No
Failure shown in the tooltip for `error`
disabled
boolean
No
Turns the button off regardless of `state`
labels
Partial<MicButtonLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element