KQ-578 · BADGE/BUMP
Badge Bump
A count badge that reacts to its own number. Every change bumps the pill from 1.25 back to 1 on recoil — two visible bounces, the physics of something landing — while the digits roll on snap and a wash of the badge's own ink flashes and drains on the exit ease. Going to zero is not a bump: the badge shrinks away on the exit ease, and a polite status line carries the count so the host button keeps whatever name it already had.
KQ-578 · BADGE/BUMP
3 held messages
Waylight inbox
Messages held for review.
Count 3
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/badge-bump
Props
- count
- number
- default —
- The number. Zero collapses the badge on the exit ease rather than bumping it.
- max
- number
- default 99
- Cap; anything above it reads as 99+ and stops the badge growing.
- tone
- "primary" | "danger" | "neutral"
- default "primary"
- Colour. The wash uses the badge's own ink, so every tone flashes correctly.
- label
- string
- default "unread"
- Names the number for assistive technology — the status line reads "12 unread".
- children
- React.ReactNode
- default —
- The thing the badge sits on, usually an icon button.
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | — | The number. Zero collapses the badge on the exit ease rather than bumping it. |
| max | number | 99 | Cap; anything above it reads as 99+ and stops the badge growing. |
| tone | "primary" | "danger" | "neutral" | "primary" | Colour. The wash uses the badge's own ink, so every tone flashes correctly. |
| label | string | "unread" | Names the number for assistive technology — the status line reads "12 unread". |
| children | React.ReactNode | — | The thing the badge sits on, usually an icon button. |