Component
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.
Xem trước
import { Badge } from "@/components/ui/badge"
<Badge>Beta</Badge>Cách dùng
Khi nào dùng
- 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.
Khi nào không dùng
- 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.
Biến thể
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>Ví dụ
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>Nên và không nên
Nên
- 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.
Không nên
- 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
| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
|---|---|---|---|---|
| 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. |
Slot
| Tên | Bắt buộc | Mô tả |
|---|---|---|
| label | có | Short label, sentence case or a single status word. |
| icon | không | Optional leading icon. |
Cấu tạo
| Phần | Mô tả |
|---|---|
| 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. |
Khả năng truy cập
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.
Cài đặt
npx shadcn add https://werewolf-ui.vercel.app/r/badge.jsonLệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").