# 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.

## 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.

Giá trị: `default`, `accent`, `outline`, `destructive`, `success`, `warning`, `info`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `purple`, `pink`. Mặc định: `default`.

## Ví dụ

### Default

```tsx
<Badge>Beta</Badge>
```

### With icon

```tsx
<Badge variant="success">
  <IconCheck size={12} />
  Ready
</Badge>
```

### Info

```tsx
<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

```bash
npx shadcn add https://werewolf-ui.vercel.app/r/badge.json
```

Lệ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"`).