Badge
A small status pill — a count, a tag, a state label. A plain <span>, because a badge is informational rather than an action.
Usage#
import { Badge } from "neelam-ui";
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>variant reuses Button's vocabulary so the two
share one visual language — minus ghost and link, which describe interaction
states a static badge does not have.
Not a button#
Badge renders a <span>, the same non-interactive default
Card and Avatar take.
Don't bolt a click handler onto a badge
A <span onClick> is invisible to the keyboard and announces as nothing. If
the badge is a filter chip the user can remove, render a real
Button — or use
Attachment's onRemove pattern, which is
the removable-chip design this library already has.
There is no built-in dismiss button here, deliberately: it was not duplicated
from Attachment without a concrete need driving its design.
Composition#
badgeVariants is exported for the cases where the element has to be something
else — a link that looks like a badge:
import { badgeVariants } from "neelam-ui";
<a href="/releases/v2" className={badgeVariants({ variant: "outline" })}>
v2.0
</a>Keyboard#
| Key | Behaviour |
|---|---|
| Tab | Not focusable. A badge is static text — if yours needs to be reachable, it should be a button or a link. |
Accessibility#
- A plain
<span>with no role. It is read as part of the surrounding text, which is what a status label should be. - Colour is never the only signal: the badge's text carries the meaning, so "Failed" reads as failed without depending on the red (WCAG 1.4.1). Never ship a badge whose only content is a colour.
- A badge used as a count next to a control needs to be part of that control's accessible name, or announced separately — a bare "3" beside "Notifications" is not automatically associated with it.
Counts belong in the label
Rather than a loose badge, fold the number into the name:
aria-label="Notifications, 3 unread". The badge then becomes the visual
presentation of something already announced correctly.
API reference#
| Prop | Type | Default |
|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | null | — |
Also accepts every native <span> attribute.