# Tag
> Generated from tag.contract.json — do not edit by hand.

A small label chip for a category, keyword, or state — filled or bordered, with an icon, a dismiss ×, or a checkable toggle.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `color` | neutral | primary | success | processing | warning | error | `neutral` | Semantic tone preset (alias: `variant`) |
| `bordered` | boolean | `false` | Outlined shape — white surface + a coloured 1px hairline instead of the filled tint |
| `icon` | string | `—` | Leading DS icon name, e.g. system-tag (resolved via <aha-icon>) |
| `closable` | boolean | `false` | Shows a dismiss × that animates out, removes the tag, and emits close |
| `checkable` | boolean | `false` | Renders a selectable toggle chip (button, aria-pressed) |
| `checked` | boolean | `false` | Selected state of a checkable tag (brand fill) |
| `close` | CustomEvent | `—` | Composed event when the × is pressed |
| `change` | CustomEvent | `—` | Composed event on a checkable toggle, detail { checked } |

## Visual standard (measured)
- Box: height 22 · radius 4 · padding 0 8 · 6px gap to a 14px leading icon
- Text: Plus Jakarta SemiBold 600, 12/18
- Neutral: bg #F1F1F1, label #4A4A4A
- Primary: bg #F9F5FF, label #6A1EBB
- Success / Processing / Warning / Error: tinted bg + matching text token
- Bordered: white surface + a coloured 1px hairline (the outlined DS V3 flavour)
- Closable: system-x ✕; animates out (scale + fade, motion-mid) then removes + emits close
- Checkable: outlined toggle; checked → brand fill #6A1EBB / white label; aria-pressed synced

## When to use
- **Tag** — labelling content with a category/keyword, or showing a non-urgent state inline
- **Badge** — a count or a status dot attached to another element
- **Button** — the chip should trigger an action — a Tag is a label, not a control

Keep tag text to one or two words, sentence case. Colour carries meaning — reserve success/processing/warning/error for real states, not decoration. Use `closable` for user-removable keywords; use `checkable` for an inline filter toggle. For a domain lifecycle state prefer the status pill (aha-design-status-badges).