Preview
Props
Variants
Colors
Pass any CSS color.
Sizes
Install
npx shadcn@latest add @evilbuttons/realistic-switchUsage
import { RealisticSwitch } from "@/components/evil-buttons/realistic-switch";
export function PowerSwitch() {
return (
<RealisticSwitch
sound
aria-label="Main power"
onCheckedChange={(on) => console.log("power:", on)}
/>
);
}<RealisticSwitch checked={isLive} onCheckedChange={setIsLive} color="#1f6feb" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | Controlled on state. |
defaultChecked | boolean | false | Initial state when uncontrolled. |
onCheckedChange | (checked: boolean) => void | - | Called when the switch latches or releases. |
color | string | "#e1261c" | Cap color. Any CSS color. |
markColor | string | white | Color of the power mark on the cap. |
tone | "auto" | "light" | "dark" | "auto" | Socket finish: follow the theme, or force ceramic white or graphite. |
illuminated | boolean | true | Light the cap from inside while it is latched on. |
sound | boolean | false | Play a short mechanical click when it latches or releases. |
size | "sm" | "default" | "lg" | "default" | Scales the whole switch. |
disabled | boolean | false | Disables the switch. |
aria-label | string | "Power" | Accessible name for the switch. |
className | string | - | Extra classes on the button. |
Good to know
- The click is synthesized with Web Audio, no audio files.
sizescales the whole switch.