Tag

A compact pill for status, labels, and metadata. The Tag JSX wrapper renders an <a-tag> styled tag — there’s no JavaScript, so tone, size, and case are all plain attributes and the styling is identical whether you use the wrapper or author the element by hand. Content is composed from icon, label, value, and iconTrailing props, the same way Button works.

Priority

priority sets the emphasis. secondary (the default) is the subtle alpha-tint fill; primary is a solid fill with white text; tertiary is a transparent outline. It composes with every tone — named or custom — and tracks dark mode.

<Tag allcaps priority="primary" tone="brand" label="Primary" />
<Tag allcaps tone="brand" label="Secondary" />
<Tag allcaps priority="tertiary" tone="brand" label="Tertiary" />

Tone

<Tag allcaps label="Neutral" />
<Tag allcaps tone="brand" label="Brand" />
<Tag allcaps tone="info" label="Info" />
<Tag allcaps tone="success" label="Success" />
<Tag allcaps tone="warning" label="Warning" />
<Tag allcaps tone="critical" label="Critical" />

<Tag allcaps tone="#ff1493" label="Magenta" />
<Tag allcaps tone="rebeccapurple" label="Purple" />
<Tag allcaps tone="#0d9488" label="Teal" />

Every tone — named or custom — paints its fill and border as semi-transparent alpha tints rather than solid colors, so a tag picks up whatever surface sits behind it. Here the same tags sit on a --bg-4 panel instead of the page canvas.

Size

Three sizes — small (16px), medium (20px, the default — emits no attribute), and large (24px) — matching Button. Height is intrinsic (line-height + padding rather than a fixed value), so the text is never clipped.

<Tag allcaps tone="info" size="small" label="Small" />
<Tag allcaps tone="info" label="Medium" />
<Tag allcaps tone="info" size="large" label="Large" />

Icon, label, and value

Set icon / iconTrailing for a leading or trailing glyph (scaled to the pill), and pair label with value for a two-part tag. value is the primary text (default color and weight); the label sits before it as a bold “key” (weight 600, same color) with no divider — the weight contrast does the separating. Tabular figures are always on, so counts, versions, and timers don’t reflow.

<Tag allcaps tone="success" icon="circle-check" label="Build" value="passed" />
<Tag allcaps tone="info" icon="hourglass" label="Running" value="20m 16s" />
<Tag allcaps icon="history" label="Commit" value="4f90d13" />
<Tag allcaps tone="warning" label="Retries" value="3" iconTrailing="refresh" />

Segments

For an arbitrary multi-part tag, pass several children instead of label / value — each segment after the first gets a hairline divider (a leading icon stays flush). The divider-less label + value pairing is the exception; everything else segments like this.

<Tag allcaps>
  <span>v2.1.0</span>
  <span>stable</span>
  <span>x64</span>
</Tag>
<Tag allcaps tone="info">
  <span>GET</span>
  <span>200</span>
  <span>142 ms</span>
</Tag>
<Tag allcaps tone="critical" icon="warning-triangle">
  <span>Exit 137</span>
  <span>OOM</span>
</Tag>

Case

Tags are normal (mixed) case by default, so the text is read as written — proper names, identifiers, and case-sensitive IDs keep their shape (GitHub, not GITHUB). Pass allcaps for the uppercase treatment: at this small size all-caps reads as a label at a glance and keeps a uniform, scannable shape, which suits short status words where the exact case carries no meaning. Without a theme, both treatments use 0.1ch tracking. Antune and Antithesis retain their font-specific 0.02ch mixed-case and 0.08ch uppercase tracking. All-caps steps each size down 1px, since caps read larger than mixed case at the same size.

<Tag icon="external-link" label="GitHub" value="v1.6.9" />
<Tag allcaps label="Running" />

<a-tag tone="success">
  <a-icon shape="check" aria-hidden="true"></a-icon>
  <a-tag-label>Build</a-tag-label>
  <a-tag-value>Passed</a-tag-value>
</a-tag>

<Tag allcaps tone="#e0457b" priority="secondary" label="Custom" />

a-tag.badge {
  background: linear-gradient(135deg, #1f6e5f, #845ec2);   /* a tone can't do gradients */
  color: #fff;
  border-radius: 1px;                                       /* sharp corners */
  padding-block: 5px;                                       /* tighter vertical padding */
  padding-inline: 14px;
}
a-tag.badge a-tag-label { font-weight: 600; letter-spacing: 0.15ch; }

<a className="tag-link" href="/builds/42">
  <Tag tone="info" icon="external-link" label="Build" value="#42" />
</a>

a.tag-link {
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
}

<Tag className="removable-tag" tone="info">
  <span>Frontend</span>
  <Button priority="quaternary" size="small" icon="x" aria-label="Remove Frontend" />
</Tag>

a-tag.removable-tag {
  padding-block: 0;
}
a-tag.removable-tag > a-button {
  align-self: stretch;
}
a-tag.removable-tag > a-button:focus-visible {
  outline-offset: -2px;
}