Badge

Component

A versatile badge component with multiple variants and sizes.

Basic Usage

The default badge with primary styling

Default Badge

Secondary

Outline

Destructive

Sizes

Different badge sizes for various use cases

Small

Default

Large

Interactive Playground

Try different badge configurations live

import { Badge } from './Badge'

export default function App() {
  return (
    <div className="p-8 space-y-4">
      <h2 className="text-2xl font-bold mb-4">Badge Examples</h2>
      
      <div className="space-y-4">
        <div className="flex gap-2">
          <Badge>Primary</Badge>
          <Badge variant="secondary">Secondary</Badge>
          <Badge variant="outline">Outline</Badge>
        </div>
        
        <div className="flex gap-2">
          <Badge size="sm">Small</Badge>
          <Badge size="default">Default</Badge>
          <Badge size="lg">Large</Badge>
        </div>
      </div>
    </div>
  )
}

Open Sandbox