Tag
A small, dismissible label representing a chosen value — selected filters, applied categories, classification metadata. Tags are user-applied; badges are system-applied.
Default
A 22 px pill with text and an optional close button.
Tones
Tags inherit badge tones. Use sparingly — most tags should stay neutral. Tones mean something happened to that entity.
With leading icon
Icons reinforce category — a coin for currency, a flag for country, a calendar for date filters.
Tag input
Tags inside a field — for categorisation and inline tagging.
Parts
| Property | Value | Notes |
|---|---|---|
| height | 22 px | Always single-line |
| padding | 0 4px 0 8px | 4 px right for the X button |
| radius | 4 px | Soft-rectangle, not pill |
| font | 500 12 px / 1 sans | Always sentence case |
| close button | 16 × 16 px hit area | .x with focus ring |
| icon | 12 × 12 px | Leading, sits flush with text |
Do & don't
Use tags for things the user added — applied filters, free-text tags, picked categories.
Use tags for system-set state like "Pending" or "Failed". That's a badge.
Keep tags scannable — one or two words. "USD", "Park Centre", "High value".
Stack 12 tags in one row. If users add that many, surface a count: +8 more
Code
<!-- Plain tag --> <span class="tag">Park Centre</span> <!-- Closeable tag --> <span class="tag">CBZ Bank <span class="x" data-icon="x"></span> </span> <!-- With leading icon --> <span class="tag"> <span data-icon="coin"></span>USD </span>