Tag

Inline metadata pill with optional dismiss button. Similar to Badge but pill-shaped and dismissible. CSS-only — dismiss handling is the consumer's responsibility.

When to use

• Categorize content: "React", "Design", "Tutorial".
• Filter selection display: active filters with one-click removal.
• Soft metadata: skills on a profile, applied tags on a record.

For status indicators (Active / Archived / Draft) use Badge. For form-control labels, use Label.

Variants

Anatomy

<!-- Static -->
<span class="tag">Documentation</span>
<span class="tag -accent">Featured</span>

<!-- Dismissible -->
<span class="tag">
  React
  <button type="button" class="tag__dismiss" aria-label="Remove React">×</button>
</span>

<!-- In a group -->
<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
  <span class="tag -muted">JavaScript</span>
  <span class="tag -muted">CSS</span>
  <span class="tag -muted">HTML</span>
</div>

Click the dismiss <button> to handle removal:

document.addEventListener("click", (e) => {
  const dismiss = e.target.closest(".tag__dismiss");
  if (dismiss) dismiss.closest(".tag")?.remove();
});

The component does not ship this handler — removal policy varies (remove from server, mark as removed locally, undo affordance).

Tokens used

• --color-surface-raised — default background
• --color-surface-canvas — muted background
• --color-accent-muted, --color-accent-strong — accent variant
• --color-danger, --color-success — status variants
• --color-ink-strong, --color-ink-regular, --color-ink-subtle
• --color-border-muted — default border
• --radius-pill — corner radius
• --space-inset-element-{s,m} — padding
• --space-gap-elements-s — gap before dismiss
• --size-control-s — dismiss button size
• --border-width-hairline / --border-width-focus
• --font-body-{s,xs}-* — typography
• --motion-fast / --motion-easing-default

Accessibility

• Tags are decorative inline elements. Use <span> unless the tag is interactive (links to a filter view → use <a>).
• The dismiss button is a real <button> with aria-label so screen readers announce "Remove React".
• When removing a tag from the DOM, focus moves to the next sibling or back to a container (consumer-defined). The component does not manage focus on removal.

Do

• Use <span> for static tags, <a> for navigable tags.
• Always pair the dismiss button with a descriptive aria-label.
• Keep tag labels short — 1-3 words.

Don't

• Don't make the entire tag clickable AND include a dismiss button — the click targets conflict.
• Don't use <button> as the outer element. The dismiss is the interactive part, the tag itself is text.