Badge

Compact, non-interactive status / label pill — counts, statuses, tags, and category labels that sit next to other content. Reach for a Badge to annotate; reach for Button or Toggle when the chip is clickable, and for Alert when the message needs its own full-width row. The API mirrors Button: variant (solid | secondary | tinted) × tone (default | destructive | success | accent). Use solid for a single high-emphasis chip, secondary for the soft "status" look (text at full hue, fill + border at 10%) that reads quietly in lists and table rows, and tinted with a color prop for dynamic per-badge hues (e.g. user-defined labels). Tone carries meaning: destructive = error/risk, success = live/healthy, accent = lilac highlight, default = neutral. Badge ships one fixed size tuned to sit inline with 14px body text — wrap it, don't scale it.

Tones × variants

DefaultDefaultDestructiveDestructiveSuccessSuccessAccentAccent
<>
  {/* default */}
  <Badge variant="solid">Default</Badge>
  <Badge variant="secondary">Default</Badge>
  {/* destructive */}
  <Badge variant="solid" tone="destructive">Destructive</Badge>
  <Badge variant="secondary" tone="destructive">Destructive</Badge>
  {/* success */}
  <Badge variant="solid" tone="success">Success</Badge>
  <Badge variant="secondary" tone="success">Success</Badge>
  {/* accent */}
  <Badge variant="solid" tone="accent">Accent</Badge>
  <Badge variant="secondary" tone="accent">Accent</Badge>
</>

Rounded = false

SolidSecondary
<>
  <Badge variant="solid" rounded={false}>Solid</Badge>
  <Badge variant="secondary" rounded={false}>Secondary</Badge>
</>

Tinted

LilacBlueIndigoTealRed
<Badge variant="tinted" color="#cd82f0">Lilac</Badge>
<Badge variant="tinted" color="#3b82f6">Blue</Badge>
<Badge variant="tinted" color="#6366f1">Indigo</Badge>
<Badge variant="tinted" color="#14b8a6">Teal</Badge>
<Badge variant="tinted" color="#ef4444">Red</Badge>

With icons

Featured New
import { Sparkles } from "lucide-react";

<Badge variant="solid"><Sparkles /> Featured</Badge>
<Badge variant="secondary"><Sparkles /> New</Badge>

With an icon

FeaturedNew
<Badge variant="solid">
  <Sparkle />
  Featured
</Badge>

Usage in a card header

Design systems meetupNext Tuesday, 6pm.
Featured
<div className="flex items-start justify-between gap-3">
  <div>
    <CardTitle>Design systems meetup</CardTitle>
    <CardDescription>Next Tuesday, 6pm.</CardDescription>
  </div>
  <Badge variant="secondary">Featured</Badge>
</div>

Props

PropTypeDefaultDescription
variant"solid" | "secondary" | "tinted""solid"Surface style.
tone"default" | "destructive" | "success" | "accent""default"Intent color (accent = lilac). Applies to solid + secondary.
roundedbooleantruetrue = pill (rounded-full), false = rounded-md.
colorstring (CSS color)—Dynamic hue. secondary → soft (text 100%, fill + border 10%); tinted → solid translucent fill.
…restHTMLAttributes<HTMLSpanElement>—Forwarded to the underlying <span>.

Source

packages/react/src/components/badge.tsx · Figma node 2814:11331