Feedback
Badge
Numbers, never a bare dot: a dot says something changed without saying how much, which sends the reader to look before they know whether it is worth looking. The pill pops in fresh whenever the count changes and collapses away at zero, so an emptied inbox clears its own marker. Counts past the maximum render as an overflow figure instead of widening the pill.
npx shadcn@latest add @minflow/badgeWhere to use it
- Unread and pending counts on navigation and toolbar icons.
- Anywhere the size of the backlog changes what the reader does next.
- Never as decoration or as a status colour; a chip carries status, a badge carries a number.
Variations
Standard
The default. A small count on an icon-only control, where the number is short enough to read without counting.
Past the maximum
When the count can run into the hundreds. Beyond the max the badge stops being a figure and starts being a signal, which is the right trade at that size.
Changing count
When the number moves while the reader is watching. Each change pops the pill in fresh, and zero collapses it away rather than leaving an empty marker behind.