Features

• Multiple variants (default, secondary, destructive, outline)
• Compact size optimized for inline use
• Semantic color coding
• Dark mode support

Usage

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

export default function Example() {
  return (
    <div className="flex gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <div className="flex gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Variants

Default

The primary badge style.

<Badge>New</Badge>
<Badge>New</Badge>

Secondary

A more subtle badge style.

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

Destructive

For errors or warnings.

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

Outline

A minimal outline-only style.

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

Use Cases

Status Indicators

<div className="flex items-center gap-2">
  <span>API Status:</span>
  <Badge variant="secondary">Healthy</Badge>
</div>
<div className="flex items-center gap-2">
  <span>API Status:</span>
  <Badge variant="secondary">Healthy</Badge>
</div>

Category Tags

<div className="flex gap-2">
  <Badge variant="outline">React</Badge>
  <Badge variant="outline">TypeScript</Badge>
  <Badge variant="outline">Next.js</Badge>
</div>
<div className="flex gap-2">
  <Badge variant="outline">React</Badge>
  <Badge variant="outline">TypeScript</Badge>
  <Badge variant="outline">Next.js</Badge>
</div>

Counts

<div className="flex items-center gap-2">
  <span>Notifications</span>
  <Badge>3</Badge>
</div>
<div className="flex items-center gap-2">
  <span>Notifications</span>
  <Badge>3</Badge>
</div>