Mic button
The only inline SVG glyph in the system. While it listens, the border and icon turn spark and pulse, so the state is visible without sound.
Variant
Controls
Code
import { MicButton } from "@/components/ui/kit/ui";
<MicButton onClick={toggleListening} />Every state
Default
Hover
Focus
Active
Disabled
Listening
Usage
Tokens it uses
| --ink | … |
|---|---|
| --muted | … |
| --line-2 | … |
| --spark | … |
| --dur-instant | … |
| --ease-out | … |
Values are read live from the stylesheet, so they follow the site theme.