Audio Button
A drop-in button that plays UI sound effects on hover and click, with semantic variants for success, error, info, and alarm states.
AudioButton wraps a standard HTML button with audio feedback powered by the useUIAudio hook. Each variant maps to a dedicated sound effect: a soft tick on hover and a context-appropriate click sound. All sounds can be opted out individually with playHoverSound or playClickSound.
The component is a forwardRef and extends all native <button> attributes, so it is a transparent replacement for any existing button.
Installation
npx shadcn@latest add @adv/audio-buttonUsage
import { AudioButton } from '@/components/ui/audio-button';
<AudioButton variant="success" onClick={() => console.log('saved')}>
Save
</AudioButton>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "success" | "error" | "info" | "alarm" | "default" | Determines the click sound and button colour. |
playHoverSound | boolean | true | Play a hover tick when the pointer enters the button. |
playClickSound | boolean | true | Play the variant sound when the button is clicked. |
className | string | — | Extra classes merged via cn. |
All other props (onClick, disabled, children, etc.) are forwarded to the underlying <button> element.