<!-- source-hash: 9b569645b139f138d4a84a3c7da50aeb -->
A reusable badge component built with class-variance-authority for consistent styling across different visual states. Provides predefined variants for common use cases like status indicators, labels, and notifications.

## Key Components

- **`badgeVariants`** - CVA configuration defining base styles and variant options
- **`Badge`** - Main component function that renders a styled div element
- **`BadgeProps`** - TypeScript interface extending HTMLDivElement attributes with variant props

## Variants

- **`default`** - Primary brand styling with hover effects
- **`secondary`** - Muted secondary appearance
- **`destructive`** - Error/warning states with red coloring
- **`outline`** - Minimal border-only styling
- **`success`** - Green styling for positive states

## Usage Example

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

function StatusIndicator() {
  return (
    <div className="flex gap-2">
      <Badge variant="success">Active</Badge>
      <Badge variant="destructive">Error</Badge>
      <Badge variant="outline">Pending</Badge>
      <Badge className="custom-styles">Custom Badge</Badge>
    </div>
  )
}

// With custom props
<Badge variant="secondary" onClick={handleClick}>
  Clickable Badge
</Badge>
```

The component supports all standard HTML div attributes and can be extended with custom className for additional styling while maintaining the predefined variant system.