Badge
Small labels for status, counts and tags - Published, Pending, 99+ - in eight variants.
Usage
import { Badge } from '@vitnode/core/components/ui/badge'<Badge variant="success">Published</Badge>Variants
Let the word carry the meaning and the color back it up.
| Variant | Use it for |
|---|---|
default | A prominent, neutral label. |
secondary / outline / ghost | Quiet labels in dense UI like tables. |
link | A label that looks like a text link. |
success | Healthy or done: Published, Active, Paid. |
warning | Needs attention: Pending, Expiring, Draft. |
destructive | Failed or blocked: Failed, Banned, Overdue. |
Status variants share their tint with the matching button, so a success
badge and a success button read as the same idea.
With an icon
Icons shrink to 12px. Mark them data-icon="inline-start" or
data-icon="inline-end" to tighten the padding on that side.
<Badge variant="success">
<BadgeCheck data-icon="inline-start" />
Verified
</Badge>Counter
Numbers are tabular, so counts don't jiggle. Add min-w-5 px-1 for a round
pill, and sr-only text so "8" means something to screen readers.
<Badge className="min-w-5 px-1">
8<span className="sr-only">unread messages</span>
</Badge>As a link
Pass render to make the badge a link. Links get a hover state.
<Badge render={<a href="/tags/announcements" />} variant="secondary">
#announcements
</Badge>Props
Prop
Type