Fancy Tag
A richer tag for places that need more presence: a small icon tile, a label and an optional count, with a layered ring that gives it depth without a shadow.
Preview
When to use
- For categories on cards and headers, where a plain tag would look slight.
- For a short set of featured topics or integrations that people pick from.
Reach for something else
- Inside dense tables and form fields: a plain Tag keeps them calm.
Anatomy
- 1
Container
White pill with a double ring: a hairline and a soft outer band.
- 2
Icon tile
A small rounded square in the tag's tint, holding the glyph.
- 3
Label
Medium weight.
- 4
Count
Optional, in secondary text after the label.
States
Default
Rings at rest.
Hover
The outer band darkens.
Selected
The ring takes the brand colour.
Focus
Focus ring outside the container.
Accessibility
- Interactive fancy tags are buttons with aria-pressed; static ones are plain text.
- The icon is decorative (aria-hidden); the label names the tag.
Source
The Fancy Tag is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block