A notifications bell that swings on a decaying spring with a lagging clapper. Turning it on rings it and pops a badge dot; turning it off settles it quietly.
Deploy alerts
Ping me when a build fails or a rollback starts.
npx shadcn@latest add https://hyperblur.dev/r/micro-bell-toggle.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-bell-toggle.tsx.
import { MicroBellToggle } from "@/components/hyperblur/micro-bell-toggle"
<MicroBellToggle label="Deploy alerts" onChange={(on) => setAlerts(on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | Controlled state. Pair with onChange. | |
| defaultChecked | boolean | true | Initial state when uncontrolled. |
| size | number | 48 | Button size in pixels. |
| accent | string | "#2f7bff" | Badge dot, sound marks and border glow color. |
| label | string | "Notifications" | Accessible name of the switch. |
| idle | boolean | true | Ring the bell now and then while it is on, until the pointer or focus arrives. |
| disabled | boolean | false | Block interaction and dim the toggle. |
| onChange | (checked: boolean) => void | Called with the new state on every toggle. | |
| className / style / ...rest | ButtonHTMLAttributes<HTMLButtonElement> | Forwarded to the root button, which carries role switch. |