An icon button with a notification badge cut out of the background. New items make the bell swing, the badge pop and a ring ping, and the number rolls in; clicking clears it with a drop.
npx shadcn@latest add https://hyperblur.dev/r/button-icon-badge.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-icon-badge.tsx.
import { ButtonIconBadge } from "@/components/hyperblur/button-icon-badge"
<ButtonIconBadge count={unread} onCountChange={setUnread} />| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | undefined | Controlled count. Increases trigger the swing and ping. |
| defaultCount | number | 3 | Initial count when uncontrolled. |
| onCountChange | (count: number) => void | undefined | Called with 0 when the badge is cleared. |
| max | number | 99 | Counts above this show as 99+. |
| dot | boolean | false | Shows a small dot instead of a number. |
| clearOnClick | boolean | true | Clears the count when the button is clicked. |
| label | string | "Notifications" | Accessible name, read with the unread count. |
| icon | ReactNode | bell icon | Icon inside the button. |
| shape | "square" | "circle" | "square" | Rounded square or circle. |
| badgeColor | string | "#ff3b4e" | Badge color. |
| ringColor | string | "#0a0a0a" | Color of the cut-out ring around the badge. Match the surface behind the button. |
| accent | string | "#2f7bff" | Focus ring color. |
| disabled | boolean | false | Disables interaction and dims the control. |