# Tag

Two tag styles in one component. Pick `variant` by the role the tag plays:

- **`variant="tag"` (default)** — hashtag presentation. `#name` with an
  underline when active. Used in experiment metadata, dataset bindrs, profile
  project footers.
- **`variant="pill"`** — boxed pill with a hairline border, fills with accent
  when active. Used for filter chips, single-select tag pickers.

## Removable tags

Hover any tag to reveal the × button. Clicking × calls `onRemove` — wire it
to delete from your state. Hovering the × turns the row red and adds a
strikethrough preview.

## Active state and accent override

`active` underlines the label. By default, hover and the active underline both
use `var(--uikit-accent)`. Pass `accent` to override — accepts a palette tone name
(`'green'`, `'red'`, …) or any CSS color string. The static text stays
`var(--ink)` — only hover and the active underline pick up the accent.

## Tone (palette colors)

`tone` constrains the tag to one of the design's six palette buckets and sets
BOTH the static text color AND the default accent (hover/active). Use it for
status-colored labels — `#failed`, `#running`, `#stale`. For the rare case
where you want the static color to differ from hover, override `accent`
independently.

## Pill variant

A single-select chip row. The active pill fills with `accent`, others show a
hairline ring.

## Color resolution

| Props | Static text | Hover / active |
| --- | --- | --- |
| `` | `var(--ink)` | `var(--uikit-accent)` |
| `` | `var(--ink)` | `green` tone |
| `` | `var(--ink)` | `#abc123` |
| `` | `red` tone | `red` tone |
| `` | `red` tone | `amber` tone |
| `` | `red` tone | `#abc123` |

> **Confirmation flows** — `Tag` fires `onRemove` immediately on × click. If
> you want a "are you sure?" step or a "don't ask for the next 10 minutes"
> suppression window, wrap the call in `Dialog` / your own confirmation logic.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | — | Tag label text. |
| `variant` | `'tag' \| 'pill'` | `'tag'` | Visual style — hashtag with underline, or boxed pill. |
| `active` | `boolean` | `false` | Pill fills with accent; tag underlines. |
| `removable` | `boolean` | `false` | Show a × button on hover that calls `onRemove`. |
| `tone` | `TagTone` | — | Constrain the tag to one of 6 palette buckets. Sets both static text color and default accent. |
| `accent` | `TagTone \| string` | — | Override the hover/active color. Accepts a palette tone name or any CSS color. |
| `light` | `boolean` | `false` | Reduce font weight to 400. |
| `compact` | `boolean` | `false` | Reduce font size by ~1.5px. |
| `onClick` | `() => void` | — | Click handler for the tag body. |
| `onRemove` | `() => void` | — | Called when the user clicks the × button (only when `removable`). |
| `className` | `string` | — | Extra classes on the root span. |

### TagTone

Six semantic-palette buckets per `design.md`. Pick by **function**, not vibe.

| Tone | Description |
| --- | --- |
| `'blue'` | Active / running / accent. Also the library's `--accent` token. |
| `'green'` | Ok / source / success. "passed", "ingest", "draft release". |
| `'amber'` | Stale / scheduled / filter. "Needs review", warnings. |
| `'red'` | Error / sink / quarantine. Failed states, destructive actions. |
| `'purple'` | Model / merge / human-authored. PRs, tags, code authorship. |
| `'warmGray'` | Idle / queued / placeholder. Neutral chips, "noop". |