<!-- source-hash: af3df5d03b971509e29cd6ef6c4c1640 -->
A client-side Tag component for displaying labeled badges with optional icons and dismissal functionality, built on `class-variance-authority` for variant-based styling.

## Key Components

- **`Tag`** — Main component rendering a styled badge with support for icons, labels, and a close button
- **`tagVariants`** — CVA variant config exported for external reuse; supports 7 visual styles
- **`TagProps`** — Interface extending `HTMLAttributes<HTMLDivElement>` with tag-specific props

### Variants

| Variant | Use Case |
|---------|----------|
| `primary` | Default yellow highlight |
| `outline` | Dark background with border |
| `success` | Green success state |
| `warning` | Yellow warning state |
| `error` | Red soft error state |
| `critical` | Solid red critical alert |
| `grey` | Neutral/muted state |

### Props

| Prop | Type | Description |
|------|------|-------------|
| `label` | `React.ReactNode` | Required tag text or content |
| `variant` | `TagVariant` | Visual style (default: `primary`) |
| `icon` | `React.ReactNode` | Optional leading icon |
| `onClose` | `() => void` | Renders dismiss button when provided |
| `disabled` | `boolean` | Applies disabled styling and prevents interaction |
| `labelClassName` | `string` | Additional classes for the label span |

## Usage Example

```typescript
// Basic tag
<Tag label="Active" variant="success" />

// With icon and close button
<Tag
  label="Urgent"
  variant="critical"
  icon={<AlertIcon />}
  onClose={() => removeTag("urgent")}
/>

// Disabled state
<Tag
  label="Unavailable"
  variant="outline"
  disabled
/>

// Using tagVariants externally
<div className={cn(tagVariants({ variant: "warning" }), "custom-class")}>
  Custom element
</div>
```