Badge

Compact status / label pill. Variant axes match Button: variant (solid | secondary | outline | tinted) × tone (default | destructive | success). The tinted variant accepts a color prop for dynamic per-badge hues.

Variants × tones

DefaultDestructiveSuccessDefaultDestructiveSuccessDefaultDestructiveSuccess
<>
  {/* solid */}
  <Badge variant="solid" tone="default">Default</Badge>
  <Badge variant="solid" tone="destructive">Destructive</Badge>
  <Badge variant="solid" tone="success">Success</Badge>
  {/* secondary */}
  <Badge variant="secondary" tone="default">Default</Badge>
  <Badge variant="secondary" tone="destructive">Destructive</Badge>
  <Badge variant="secondary" tone="success">Success</Badge>
  {/* outline */}
  <Badge variant="outline" tone="default">Default</Badge>
  <Badge variant="outline" tone="destructive">Destructive</Badge>
  <Badge variant="outline" tone="success">Success</Badge>
</>

Rounded = false

SolidSecondaryOutline
<>
  <Badge variant="solid" rounded={false}>Solid</Badge>
  <Badge variant="secondary" rounded={false}>Secondary</Badge>
  <Badge variant="outline" rounded={false}>Outline</Badge>
</>

Tinted

LilacBlueMandarinTealRed
<Badge variant="tinted" color="#cd82f0">Lilac</Badge>
<Badge variant="tinted" color="#3b82f6">Blue</Badge>
<Badge variant="tinted" color="#f97316">Mandarin</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="outline">Featured</Badge>
</div>

Props

PropTypeDefaultDescription
variant"solid" | "secondary" | "outline" | "tinted""solid"Surface style. Use "tinted" with the color prop for dynamic per-badge hues.
tone"default" | "destructive" | "success""default"Intent color. Applies to solid, secondary, and outline variants.
roundedbooleantruetrue = pill (rounded-full), false = rounded-md.
colorstring (CSS color)—Dynamic color for variant="tinted". Background at 70% opacity, text at full.
…restHTMLAttributes<HTMLSpanElement>—Forwarded to the underlying <span>.

Source

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