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) |
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn