Components
Badge
A short label for a status or a category. It uses a soft fill, or an outline when it should stay quiet. It never uses a solid hue. Solids with text-on-<hue> are for Avatar.
Preview
import { Badge } from "@/components/ui/badge"
<Badge>Beta</Badge>Usage
When to use
- Show the state of an item next to it: Failed, Ready, Expiring.
- Tag an item with a category the user reads but doesn't act on: Design, Beta.
When not to use
- Anything clickable or toggleable. Use Button.
- A picked value the user can take out, such as an active filter. Use Token with a remove button.
- Naming a design token or another machine value. Use Token.
- Sentences or long labels. Keep a badge label short: Beta, Failed, New.
Variants
variant
default is a neutral gray label. accent uses the muted accent. outline has no fill, only a thin border. destructive, success, warning and info show a status. red, orange, yellow, green, teal, blue, purple and pink mark a category. Every filled variant pairs the soft background with its matching text color, never the solid.
import { Badge } from "@/components/ui/badge"
<Badge>Beta</Badge>
<Badge variant="accent">Beta</Badge>
<Badge variant="outline">Beta</Badge>
<Badge variant="destructive">Beta</Badge>
<Badge variant="success">Beta</Badge>
<Badge variant="warning">Beta</Badge>
<Badge variant="info">Beta</Badge>
<Badge variant="red">Beta</Badge>
<Badge variant="orange">Beta</Badge>
<Badge variant="yellow">Beta</Badge>
<Badge variant="green">Beta</Badge>
<Badge variant="teal">Beta</Badge>
<Badge variant="blue">Beta</Badge>
<Badge variant="purple">Beta</Badge>
<Badge variant="pink">Beta</Badge>Examples
Default
import { Badge } from "@/components/ui/badge"
<Badge>Beta</Badge>With icon
import { IconCheck } from "@tabler/icons-react"
import { Badge } from "@/components/ui/badge"
<Badge variant="success">
<IconCheck size={12} />
Ready
</Badge>Info
import { Badge } from "@/components/ui/badge"
<Badge variant="info">Scheduled</Badge>Do and don't
Do
- Use the status variants (destructive, success, warning, info) for state, and hues for categories.
- Keep labels short: Beta, Failed, New.
- Show at most one status badge per row or card.
- Put the icon (12px) before the label.
- Use outline for a quiet neutral label next to filled badges.
Don't
- Don't make a badge clickable.
- Don't use Badge for filter chips or removable tags. Anything that toggles or has a remove action is a Button.
- Don't put text or icons on a hue solid (bg-red). Solids are for dots and charts.
- Don't use the danger solid with text-on-danger for a badge; destructive is the soft pair.
- Don't restyle colors through className. Pick a variant. If none fits, open an issue instead of overriding it.
Props
| Name | Type | Values | Default | Description |
|---|---|---|---|---|
| variant | enum | default | accent | outline | destructive | success | warning | info | red | orange | yellow | green | teal | blue | purple | pink | default | default is a neutral gray label. accent uses the muted accent. outline has no fill, only a thin border. destructive, success, warning and info show a status. red, orange, yellow, green, teal, blue, purple and pink mark a category. Every filled variant pairs the soft background with its matching text color, never the solid. |
Slots
| Name | Required | Description |
|---|---|---|
| label | yes | Short label, sentence case or a single status word. |
| icon | no | Optional leading icon. |
Anatomy
| Part | Description |
|---|---|
| root | The badge surface: 24px tall (h-6 on the numeric size scale, no size token yet), soft fill, radius-element, compact type. |
| icon | Optional Tabler icon before the label, 12px. |
Accessibility
Role: generic
- Badge is not interactive. Don't make it a link or button; put the action on the row or card instead.
- Color is not the only cue: keep a short text label (Failed, not only a red dot).
- Root is a plain span with no role, so a badge is never a live region by default. If a badge's text changes and must be announced (a build going from Running to Failed), add role="status" at the call site.
Install
npx shadcn add https://werewolf-ui.vercel.app/r/badge.jsonThis also adds styles/werewolf.css, the tokens every component uses, and any other component it needs. Import that file once in your root CSS, after @import "tailwindcss", with a path relative to that CSS file (from app/globals.css it is @import "../styles/werewolf.css").