Tag
A label/keyword chip, optionally linked and optionally removable. Use for labels on issues, filters, and topic chips. Plain text children render as a static chip; an <a> child makes it navigable; a .tag-remove button makes it dismissible.
Root: .tag on <span>
Examples
Example 1
design
<span class="tag">design</span>Example 2
<span class="tag"><a href="#">frontend</a><button class="tag-remove" aria-label="Remove frontend">×</button></span>Contract
Variants & modifiers
| Class | Axis | Rules |
|---|---|---|
tag-rounded | modifier | optional |
Structure
| Selector | Required | Description |
|---|---|---|
a | optional | Optional link child; inherits chip color, underlines on hover. |
button.tag-remove | optional | Optional remove button rendered after the label; shows danger colors on hover. Must be a <button> for keyboard operability. |
Accessibility
| On | Attribute | Level | When |
|---|---|---|---|
.tag-remove | aria-label | required |
Give .tag-remove an aria-label that names what it removes (e.g. aria-label="Remove frontend"), not just "Remove". The chip itself is non-interactive; interactivity lives on the inner <a>/<button> so it stays keyboard-reachable.
Nesting
Allowed in:
inline textissue detail headersfilter rows
Never inside (or containing):
.tag