# Tag

## Visual Structure

```
ga-tag [--information|--success|--error|--warning|--disabled|--interactive|--interactive-disabled|--interactive-selected|--interactive-selected-disabled|--utility-*]
  ├── ga-tag__icon (optional)
  ├── ga-tag__label
  ├── ga-tag__separator (optional)
  └── ga-tag__icon (optional)
```

## Elements Hierarchy

### Core Block

- `ga-tag` - Main container for the tag component

### Mandatory Elements

- `ga-tag__label` - Text content of the tag

### Optional Elements

- `ga-tag__icon` - Icons that can appear before or after the label
- `ga-tag__separator` - Visual divider between content elements

### Modifiers

#### Status Variants

- `ga-tag--information` - Styles the tag with information colors
- `ga-tag--success` - Styles the tag with success colors
- `ga-tag--error` - Styles the tag with error colors
- `ga-tag--warning` - Styles the tag with warning colors
- `ga-tag--disabled` - Styles the tag as disabled

#### Interactive Variants

- `ga-tag--interactive` - Makes tag clickable with dashed border
- `ga-tag--interactive-disabled` - Disabled version of interactive tag
- `ga-tag--interactive-selected` - Selected state for interactive tag
- `ga-tag--interactive-selected-disabled` - Disabled version of selected tag

#### Utility Color Variants

- `ga-tag--utility-grey` - Grey color theme
- `ga-tag--utility-indigo` - Indigo color theme
- `ga-tag--utility-teal` - Teal color theme
- `ga-tag--utility-lime` - Lime color theme
- `ga-tag--utility-purple` - Purple color theme
- `ga-tag--utility-pink` - Pink color theme
- `ga-tag--utility-rose` - Rose color theme
- `ga-tag--utility-blue` - Blue color theme
- `ga-tag--utility-green` - Green color theme
- `ga-tag--utility-orange` - Orange color theme
- `ga-tag--utility-disabled` - Disabled state for utility tags

## Examples

### Regular Status Tags

```html
<div class="ga-tag ga-tag--success">
  <!-- icon: circle-check, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">Success</span>
</div>
<div class="ga-tag ga-tag--warning">
  <!-- icon: triangle-alert, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">Warning</span>
</div>
<div class="ga-tag ga-tag--information">
  <!-- icon: info, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">Information</span>
</div>
<div class="ga-tag ga-tag--error">
  <!-- icon: octagon-alert, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">Error</span>
</div>
<div class="ga-tag ga-tag--disabled">
  <!-- icon: circle-check, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">Disabled</span>
</div>
```

### Interactive Tags

```html
<div tabindex="0" class="ga-tag ga-tag--interactive">
  <!-- icon: plus, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">Default</span>
</div>
<div class="ga-tag ga-tag--interactive">
  <span class="ga-tag__label">With separator</span>
  <div class="ga-tag__separator"></div>
  <!-- icon: x, size=16, class="ga-tag__icon" -->
</div>
<div class="ga-tag ga-tag--interactive-disabled">
  <!-- icon: plus, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">Disabled</span>
</div>
<div tabindex="0" class="ga-tag ga-tag--interactive-selected">
  <!-- icon: plus, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">Selected</span>
</div>
<div class="ga-tag ga-tag--interactive-selected-disabled">
  <!-- icon: plus, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">Selected disabled</span>
</div>
```

### Utility Color Tags

```html
<div tabindex="0" class="ga-tag ga-tag--utility-grey">
  <!-- icon: plus, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">Default</span>
</div>
<div tabindex="0" class="ga-tag ga-tag--utility-grey">
  <!-- icon: truck, size=16, class="ga-tag__icon" -->
  <span class="ga-tag__label">With icons</span>
  <!-- icon: chevrons-up-down, size=16, class="ga-tag__icon" -->
</div>
<div class="ga-tag ga-tag--utility-indigo">
  <span class="ga-tag__label">Indigo</span>
</div>
<div class="ga-tag ga-tag--utility-teal">
  <span class="ga-tag__label">Teal</span>
</div>
<div class="ga-tag ga-tag--utility-lime">
  <span class="ga-tag__label">Lime</span>
</div>
<div class="ga-tag ga-tag--utility-purple">
  <span class="ga-tag__label">Purple</span>
</div>
<div class="ga-tag ga-tag--utility-pink">
  <span class="ga-tag__label">Pink</span>
</div>
<div class="ga-tag ga-tag--utility-rose">
  <span class="ga-tag__label">Rose</span>
</div>
<div class="ga-tag ga-tag--utility-blue">
  <span class="ga-tag__label">Blue</span>
</div>
<div class="ga-tag ga-tag--utility-green">
  <span class="ga-tag__label">Green</span>
</div>
<div class="ga-tag ga-tag--utility-orange">
  <span class="ga-tag__label">Orange</span>
</div>
<div class="ga-tag ga-tag--utility-disabled">
  <span class="ga-tag__label">Disabled</span>
</div>
```