Components
Badge
A capped count, and a status dot that never travels alone.
Messages 3Overdue 9+Inbox 9+
onlinesuccesswarningdangerneutral
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/badge.jsonCounts are capped
CountBadge renders 9+ past its max. The badge's width is part of the
layout around it, and an unbounded number pushes its neighbours — a sidebar item
should not reflow because a queue got long. It renders nothing at zero, because
a badge showing "0" is drawing attention to the absence of news.
A dot is not a label
StatusDot requires a label. On its own a coloured dot is a colour with no
meaning attached — invisible to a screen reader and ambiguous to anyone who
cannot separate the hues. The label is what makes it a status.
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | — | Hidden entirely at zero. |
| max | number | 9 | Beyond this it renders n+. |
| tone | "neutral" | "brand" | "danger" | "neutral" | CountBadge. |
| label | string | — | StatusDot. Required. |