Data display
Badge
A small pill for status and labels, in neutral, accent, success, warning, error and outline variants.
- Source
- src/components/ui/badge.tsx
- Figma
- Badge · variant (neutral, accent, success, warning, error) × size (sm, md) × leading (none, icon, avatar). In code: variant only, one size, leading content passed as children.
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Badge } from "@/components/ui/badge";When to use
- Read-only status in tables and lists: Active, Trial, Past due.
- Short labels such as a plan name or "New".
- For something people click to filter or remove, use Chip.
- For a full sentence of feedback, use Alert.
Examples
With icon
There is no icon prop: put a size-3 lucide icon before the label.
With avatar
Shrink an Avatar with className for the leading avatar slot, e.g. an assignee.
Mapping status to variant
Keep one lookup from your data's status to a variant so every table uses the same colors.
API reference
Badge
Extends native span attributes. There is no size or leading prop: the badge has one size, and a leading icon or Avatar goes in children (items are spaced with gap-1). The outline variant exists in code only.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "neutral" | "accent" | "success" | "warning" | "error" | "outline" | "neutral" | Color treatment. success, warning and error use a 15% tint with colored text; accent is solid violet. |
| className | string | - | Merged with the variant classes. |
badgeVariants
The class-variance-authority function behind Badge, for styling a link or button like a badge.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "neutral" | "accent" | "success" | "warning" | "error" | "outline" | "neutral" | Same variants as Badge. |
Accessibility
- Badge is a plain span with no role; its text is read inline with the surrounding content.
- Always include a text label: color alone does not tell everyone that something failed.
- Leading icons and avatars are decorative; the text label carries the meaning.
- If a badge updates live (for example a deploy status), wrap it in an element with role="status".