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.

#vision-model#dreamlake#q3-curated#imagenet-1M

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.

#dreamlake#dreamlake#experiment-v2#failed-runs#brand-tag

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.

#running#passed#stale#failed#merged#queued

#experiment-v2#failed-runs#needs-review

Pill variant

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

allpublicprivatemine

Color resolution

Props	Static text	Hover / active
`<Tag name="x" />`	`var(--ink)`	`var(--uikit-accent)`
`<Tag name="x" accent="green" />`	`var(--ink)`	`green` tone
`<Tag name="x" accent="#abc123" />`	`var(--ink)`	`#abc123`
`<Tag name="x" tone="red" />`	`red` tone	`red` tone
`<Tag name="x" tone="red" accent="amber" />`	`red` tone	`amber` tone
`<Tag name="x" tone="red" accent="#abc123" />`	`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".