Equalizer Toggle
A sound toggle: the equalizer bars dance while it is on, and freeze in grayscale when it is off.
Turning the dancing equalizer bars themselves into a toggle: while on, 4–6 volume bars rise and fall continuously at different phases and periods and glow in the accent color; while off, all the bars fold down to a low point one after another and freeze in grayscale, so playing and muted states are distinguishable at a glance — especially suited to a mute button for background music or sound effects.
Loading preview…
npx shadcn@latest add https://webberui.com/r/equalizer-toggle.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
5
<EqualizerToggle />
Installation
npx shadcn@latest add https://webberui.com/r/equalizer-toggle.jsonOr, once registries are configured in components.json, install it as @webberui/equalizer-toggle.
Usage
import { EqualizerToggle } from "@/components/ui/equalizer-toggle";
<EqualizerToggle
defaultOn
color="#8b5cf6"
label="Background music toggle"
onChange={(on) => console.log(on ? "playing" : "muted")}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
on | boolean | — | Controlled mode: whether it is currently on; when omitted, it is uncontrolled |
defaultOn | boolean | false | Initial state in uncontrolled mode |
onChange | (on: boolean) => void | — | Callback on toggle, with the new state after the toggle as its argument |
color | string | "#10b981" | Accent color of the equalizer bars while on; accepts any valid CSS color |
bars | number | 5 | Number of equalizer bars (clamped to 3–8 automatically) |
size | "sm" | "md" | "lg" | "md" | Size |
disabled | boolean | false | Whether it is disabled (not clickable, semi-transparent) |
label | string | "聲音開關" | Accessible label, the toggle name announced to assistive technology |
className | string | — | Forwarded and merged onto the button wrapper |
Accessibility
- Uses a native
buttonwithrole="switch"andaria-checked, so state changes are announced by assistive technology immediately, and both Space and Enter operate it - The
labelprop provides the toggle's accessible name ("聲音開關"by default), and the dancing equalizer bars are decorative only, markedaria-hidden - It has a
focus-visiblefocus ring, clearly visible during keyboard operation - When the user has "reduce motion" enabled at the system level, no dancing animation is played; the state is shown instead as static differences in height (on) and a grayscale low point (off)
- The state is not conveyed by color alone: when off, the bar heights also fold down to a low point, so users with color vision deficiency can tell as well