Tag
Two tag styles in one component. Pick variant by the role the tag plays:
variant="tag"(default) — hashtag presentation.#namewith an brought to full strength when active. Used in experiment metadata, dataset bindrs, profile project footers.variant="pill"— the bare label, no#; colour carries the meaning 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 brings the label to full strength in its accent. By default, hover and active 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 state 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 labelled value: no line, no fill, just the word in its tone with room around it. This is what the app reaches for when a value needs to read as a labelled object rather than as prose: a kind, a run's status, someone's role, a bindr you can take off.
Every one of them is compact, and the status row is light as well —
compact light is the shape in production, not the default size below it.
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 —
TagfiresonRemoveimmediately 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 inDialog/ your own confirmation logic.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Tag label text. |
variant | 'tag' | 'pill' | 'tag' | Visual style — hashtag, or boxed pill. |
active | boolean | false | The accent colour takes over: the pill's hairline and label, or the tag's label. Neither fills. The app does not use this — every Tag it renders is a passive label — so treat it as available rather than as the shape to design against. |
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". |