Tag
A small labelled element used for categorisation, filtering, or displaying a list of attributes.
Plain English
Tags are the organisational labels of a UI — they categorise content, show selected filters, or display a list of attributes on an item. Unlike badges (which communicate status), tags are neutral metadata. An article has tags: "Design", "Typography", "CSS". A product has tags: "Organic", "Gluten-free". Tags in an active filter bar show what the user has selected and can usually be removed. The key design consideration is whether tags are purely informational (just labels) or interactive (removable/clickable).
Technical
Informational tags: span elements with CSS. Removable tags: button wrapper or span + × button. Clickable/filter tags: role="checkbox" (toggleable) or role="button" (action). Tag group: display: flex + flex-wrap: wrap + gap: 8px. Overflow: if many tags, show first N with "+4 more" overflow. Colour: neutral (grey) for informational; accent-tinted or categorically coloured for clickable filters. Remove button: × at 16px, 4px left margin, hover opacity change.
Live Demo
Default tags (outlined)
Removable tags
Colored tags
Input tags (press Enter)
Tags are user-generated. Always provide a way to remove them. Max 3–4 visible per item.
Usage
✓ Good usage
A "Selected filters" bar with removable pill tags ("Color: Blue ×", "Size: M ×") that each have a clear × button and empty the filter when clicked.
✗ Bad usage
Tags styled identically to status badges — users confuse taxonomy labels with status indicators.
Recommended values
- Padding: 2px 10px (slightly more than badge)
- Border radius: 4-6px (square tag) or 999px (pill tag)
- Font: 12-13px, 400-500 weight
- Colour: neutral for informational, slight accent tint for selected/clickable
- Remove × button: 14px, 6px left padding
Common mistakes
- Remove button too small to tap (under 24px) on mobile.
- Tags visually identical to badges — they serve different purposes.
- No keyboard way to remove a tag — the × button must be keyboard-accessible.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Neutral grey tags: 2px/10px padding, 4px border radius, 12px text. Selected/filter tags: light accent background. Removable tags: × button at the right, 6px gap from label, minimum 24px touch area. Wrap with flex-wrap: wrap, 8px gap.