MicButton
Circular toggle button for voice recording. Shows a microphone icon when idle and a stop square when recording. Includes a pulsing ring animation during active recording.
IdleReady to record
Idle + Hoverbg-muted/80
ListeningPulse ring active
Listening + Hoverbg-primary/90
Disabledopacity 40%
| Prop | Type | Default | Description |
|---|---|---|---|
| isListening | boolean | --- | Whether the mic is currently recording (required) |
| disabled | boolean | --- | Disables the button (e.g., when AI is speaking) (required) |
| onToggle | () => void | --- | Callback to start/stop recording (required) |
Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer