<!-- source-hash: 88aa5dbba51bdd21ac31415ed974140c -->
A reusable Badge component built with class-variance-authority that provides consistent styling for status indicators, labels, and categorization elements.

## Key Components

- **Badge**: Main component function that renders a styled div element
- **BadgeProps**: TypeScript interface extending HTML div attributes with variant props
- **badgeVariants**: CVA-powered style variants including default, secondary, destructive, outline, and success styles

## Usage Example

```typescript
import { Badge } from "./badge"

function StatusIndicator() {
  return (
    <div className="flex gap-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="success">Active</Badge>
      <Badge variant="destructive">Error</Badge>
      <Badge variant="outline">Draft</Badge>
      <Badge className="bg-blue-500 text-white">Custom</Badge>
    </div>
  )
}

// Usage in lists or cards
function UserCard({ status }: { status: string }) {
  return (
    <div className="p-4 border rounded">
      <h3>User Profile</h3>
      <Badge variant={status === "active" ? "success" : "secondary"}>
        {status}
      </Badge>
    </div>
  )
}
```

The component leverages Tailwind CSS classes and supports custom styling through the `className` prop while maintaining consistent design system patterns.