All components
Notify Button
ButtonsBell button that rings on click and clears its unread badge.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/notify-button.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/notify-button.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 0 | Initial unread count; clicking clears it. |
| className | string | - | Classes applied to the button. |
Accessibility
- aria-label includes the unread count, so the badge is not the only signal.
- The badge is capped at 9+ so the pill never distorts.
- Ring animation is keyed off a counter, letting repeat clicks replay it.
Dependencies
motionclsxtailwind-mergelucide-react