Bell Toggle
A notification pill that rings once, crossfades its label, and reserves its wider state.
The pill keeps the width of the longer label, so the control never shifts.
Implementation
1"use client";2 3import {4 useEffect,5 useState,6 type ButtonHTMLAttributes,7 type ReactNode,8} from "react";9import { Bell } from "lucide-react";10 11export type BellToggleProps = Omit<12 ButtonHTMLAttributes<HTMLButtonElement>,13 "children" | "onChange"14> & {15 /** Controlled pressed state. */16 pressed?: boolean;17 /** Initial pressed state when uncontrolled. */18 defaultPressed?: boolean;19 /** Called on every toggle. */20 onChange?: (pressed: boolean) => void;21 /** Label at rest. */22 offLabel?: string;23 /** Label after the toggle. */24 onLabel?: string;25 /** Constant accessible name; falls back to offLabel. */26 label?: string;27 /** Notification count shown while on. */28 count?: number;