<!-- source-hash: 6142d73d82bfcb3ba377d2f80cb29999 -->
Storybook stories for the `Tag` UI component, covering all visual variants, icon/close button combinations, disabled states, and composite showcase renders.

## Key Components

| Export | Description |
|--------|-------------|
| `Primary` | Default primary variant |
| `Outline` | Outline/bordered variant |
| `Success` / `Warning` / `Error` / `Critical` / `Grey` | Semantic status variants |
| `WithIcon` | Tag with a leading icon |
| `WithCloseButton` | Tag with dismissible close handler |
| `WithIconAndClose` | Tag combining icon and close button |
| `Disabled` / `AllDisabled` | Disabled state across all variants |
| `AllVariants` | Showcase of every variant side-by-side |
| `AllWithIcons` | All variants with icons |
| `AllWithClose` | All variants with close buttons |
| `AllWithIconAndClose` | All variants with both icon and close |
| `DisabledWithIconAndClose` | Disabled state with full feature set |

## Usage Example

```typescript
import { Tag } from '../components/ui/tag';
import { Smile } from 'lucide-react';

// Basic variant
<Tag variant="success" label="Active" />

// With icon
<Tag variant="primary" label="Category" icon={<Smile className="size-5" />} />

// Dismissible
<Tag variant="warning" label="Pending" onClose={() => handleRemove()} />

// Full featured
<Tag
  variant="error"
  label="Failed"
  icon={<Smile className="size-5" />}
  onClose={() => handleRemove()}
  disabled={false}
/>
```

## Variants

The `Tag` component supports 7 variants controlled via the Storybook `select` control:

```text
primary | outline | success | warning | error | critical | grey
```