DefaultSecondaryOutlineDestructive
import { Badge } from "@/components/ui/badge";
export function BadgeDemo() {
return (
<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>
);
}Variants
Default
Solid primary background. Use for primary labels, active states, or main categories.
Default
Secondary
Muted background. Use for neutral tags, metadata, or secondary classifications.
Secondary
Outline
Border only, no background fill. Lightweight option for tags that should not compete with surrounding content.
Outline
Destructive
Signals an error, danger, or blocked state.
Destructive
With Icon
Badges accept SVG icons — they render at size-3 (12px) automatically.
PendingDoneFailed
As Link
Use asChild to render a badge as an anchor or any other element.
Props
Badge
Usage
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
# 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 contrastInstallation
GIN Design Plugin$ npx shadcn add https://gin-design.vercel.app/badge