Browse components
Bell Toggle
A notification switch whose bell swings and rings when enabled, and gets a drawn slash when muted.
Installation
npx shadcn@latest add @glint-ui/bell-toggleFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/bell-toggle.json
Usage
import { BellToggle } from "@/components/ui/bell-toggle";
const [on, setOn] = useState(true);
<BellToggle checked={on} onCheckedChange={setOn} label="Notifications" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Notifications" | Visible label and accessible name. |
| color | string | "#f59e0b" | Track and bell color when enabled. |
| defaultChecked | boolean | true | Initial state when uncontrolled. |
| disabled | boolean | false | Disable the switch. |
| checked | ReactNode | — | Controlled state. Pair with onCheckedChange. |
| onCheckedChange | ReactNode | — | Called with the new state after each toggle. |
| className | string | — | Extra classes for the root element. |