# Badge

Small status indicators and labels for categorizing, tagging, or highlighting content.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode name="badge">
      <div className="flex flex-wrap items-center gap-2">
        <Badge>
          Default
        </Badge>

        <Badge variant="secondary">
          Secondary
        </Badge>

        <Badge variant="outline">
          Outline
        </Badge>

        <Badge variant="destructive">
          Destructive
        </Badge>
      </div>
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode name="badge">
      <div className="flex flex-wrap items-center gap-2">
        <Badge>
          Default
        </Badge>

        <Badge variant="secondary">
          Secondary
        </Badge>

        <Badge variant="outline">
          Outline
        </Badge>

        <Badge variant="destructive">
          Destructive
        </Badge>
      </div>
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode name="badge">
      <div className="flex flex-wrap items-center gap-2">
        <Badge>
          Default
        </Badge>

        <Badge variant="secondary">
          Secondary
        </Badge>

        <Badge variant="outline">
          Outline
        </Badge>

        <Badge variant="destructive">
          Destructive
        </Badge>
      </div>
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode name="badge">
      <div className="flex flex-wrap items-center gap-2">
        <Badge>
          Default
        </Badge>

        <Badge variant="secondary">
          Secondary
        </Badge>

        <Badge variant="outline">
          Outline
        </Badge>

        <Badge variant="destructive">
          Destructive
        </Badge>
      </div>
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## Variants [#variants]

### Default [#default]

Solid primary background. Use for primary labels, active states, or main categories.

<div className="my-6">
  <Badge>
    Default
  </Badge>
</div>

### Secondary [#secondary]

Muted background. Use for neutral tags, metadata, or secondary classifications.

<div className="my-6">
  <Badge variant="secondary">
    Secondary
  </Badge>
</div>

### Outline [#outline]

Border only, no background fill. Lightweight option for tags that should not compete with surrounding content.

<div className="my-6">
  <Badge variant="outline">
    Outline
  </Badge>
</div>

### Destructive [#destructive]

Signals an error, danger, or blocked state.

<div className="my-6">
  <Badge variant="destructive">
    Destructive
  </Badge>
</div>

## With Icon [#with-icon]

Badges accept SVG icons — they render at `size-3` (12px) automatically.

<div className="my-6 flex flex-wrap items-center gap-2">
  <Badge>
    <Clock />

    Pending
  </Badge>

  <Badge variant="secondary">
    <Check />

    Done
  </Badge>

  <Badge variant="destructive">
    <X />

    Failed
  </Badge>
</div>

## As Link [#as-link]

Use `asChild` to render a badge as an anchor or any other element.

<div className="my-6">
  <Badge>
    <a href="#">
      Clickable badge
    </a>
  </Badge>
</div>

## Props [#props]

### Badge [#badge]

| Prop        | Type                                                     | Default     | Description                              |
| ----------- | -------------------------------------------------------- | ----------- | ---------------------------------------- |
| `variant`   | `"default" \| "secondary" \| "destructive" \| "outline"` | `"default"` | Visual style                             |
| `asChild`   | `boolean`                                                | `false`     | Render as the child element (e.g. `<a>`) |
| `className` | `string`                                                 | —           | Additional CSS classes                   |
| `children`  | `ReactNode`                                              | —           | Badge label, icon, or both               |

## Usage [#usage]

```tsx
import { Badge } from "@/components/ui/badge";

// Basic
<Badge>New</Badge>
<Badge variant="secondary">Draft</Badge>
<Badge variant="outline">Beta</Badge>
<Badge variant="destructive">Error</Badge>

// As link
<Badge asChild>
  <a href="/changelog">v2.0</a>
</Badge>
```

## Specs [#specs]

```md
# Mint — Badge Specs

## Component
- name: badge
- file: registry/mint/badge.tsx
- installs to: components/ui/badge.tsx
- dependencies: class-variance-authority, radix-ui

## What is it
A small inline label for categorizing, tagging, or indicating status. Sits
alongside text or inside tables, cards, and navigation. Not interactive by
default — use asChild with an anchor for clickable badges.

## Visual identity
Compact and typographic. Rounded-md (not pill-shaped), px-2 py-0.5, text-xs
font-medium. Default variant fills with Mint's green primary; the four variants
still cover the full range of semantic weight from neutral to urgent. Low
visual footprint — designed to inform, not distract.

## Design tokens
--primary: oklch(0.5 0.14 155)            — default background
--primary-foreground: oklch(1 0 0)        — default text
--secondary: oklch(0.95 0.04 155)         — secondary background
--secondary-foreground: oklch(0.32 0.1 155) — secondary text
--destructive: oklch(0.55 0.25 15)        — destructive background
--accent: oklch(0.92 0.05 155)            — outline hover background
--border: oklch(0.88 0.04 155 / 60%)      — outline border
--ring: oklch(0.5 0.14 155)               — focus ring

## Dark theme
--primary: oklch(0.62 0.15 155)
--primary-foreground: oklch(0.1 0 0)
--secondary: oklch(0.22 0.04 155)
--secondary-foreground: oklch(0.88 0.06 155)
--border: oklch(0.32 0.05 155 / 40%)

## Variants
- default     → solid primary. Main categories, active states, version tags.
- secondary   → muted. Neutral metadata, optional filters, secondary tags.
- outline     → border only. Lightweight — for tags in busy contexts.
- destructive → red. Errors, failed states, blocked items.

## States
- focus-visible: border-ring + ring-ring/50 + ring-[3px]
- aria-invalid:  ring-destructive/20 + border-destructive
- asChild hover (link): [a&]:hover:bg-primary/90 (or secondary/outline equivalents)

## Icons
- SVG children: auto-sized to size-3 (12px), pointer-events-none
- Place icon before or after label text — gap-1 handles spacing

## Conventions
- Keep badge text to 1–3 words maximum
- Do not use Badge as a primary interactive control — use Button instead
- Use asChild + <a> for navigable badges (e.g. version, category, tag links)
- Do not use outline on dark backgrounds without checking contrast
```

## Installation [#installation]

<CommandBox componentName="badge" className="mt-2" />