Removable labels for filtering and classification.
| Prop / event | Type | Notes |
|---|---|---|
| onRemove | () => void | Renders the × and fires on click |
| tone | neutral · warm · success · info · danger | Grey by default, or a semantic tint |
| size | S · M · L | Chip scale; M is the default |
| static | boolean | Read-only, no × button |
| Enter (field) | — | Commits the draft into a tag |
| Backspace (empty) | — | Removes the last tag |
Tags name and filter. For a selectable filter chip that toggles on click, use Pills; for read-only status, use Badge.
Short, lower-case, one concept each. They scan as a set.
Don't pack a phrase into a tag. Tags are keywords, not descriptions.
Give editable tags a clear × and a Backspace shortcut.
Don't colour tags at random. Reserve the warm tone for one real signal.
Active filters as removable tags inside the search field.
Read-only topic tags under a title or card.
Email or people pickers commit each entry into a tag.
| Token | Value | Role |
|---|---|---|
| --tag-bg | #16171B | Chip fill |
| --tag-border | #2A2A30 | Hairline |
| --tag-radius | 6px | Chip corner |
| --tag-warm | #FF7A00 @14% | Warm tone tint |
| --tag-x | 16px | Remove button hit area |
| --tag-field-focus | rgba(255,122,0,.14) | Field focus ring |
<span class="o-tag">design <button class="o-tag__x" aria-label="Remove design">×</button> </span> <span class="o-tag o-tag--static">read-only</span> <div class="o-tag-field"> <span class="o-tag">tokens<button class="o-tag__x">×</button></span> <input class="o-tag-input" placeholder="Add tag…" /> </div>