Figma tags (chips) components

Tags are labels users get to touch. They hold the skills on a profile, the filters on a search page, the recipients in a share dialog, and unlike their read-only cousins, they're added, removed, selected, and dismissed all day long. That constant handling means every small state, from the hover on a close icon to a checked filter, gets exercised by real users daily. That interactivity is exactly what the 4 tag components and 210 variants above are built for.

Tags, chips, badges, pills: sorting out the names

The vocabulary is a mess, so here's the map. Tags and chips are the same thing: interactive elements users manage. Material Design standardised on "chips" and splits them into four jobs (assist, filter, input, and suggestion), while most other design systems say tags.

A badge is the read-only sibling that reports status and never responds to a click. "Pill" just describes the fully rounded shape either of them can wear.

Keeping tags and badges as separate components, as Untitled UI does, is what stops "clickable-looking labels that do nothing" from creeping into your product.

Anatomy and variations

Each tag comes in three sizes with a set of optional parts: a leading dot for status, a leading avatar for people, a country flag for locale, a trailing count for grouped values, and a trailing X close for removal. There's also a leading checkbox version for selection patterns, and everything is built with Auto Layout so a tag grows with its label instead of truncating it.

The close X, count, and checkbox are their own sub-components with hover, focused, and disabled states, because the small interactive core of a tag is precisely the part that needs real states. A close icon without a hover state feels broken the first time someone tries to remove a filter.

Filter chips and input tags

Two jobs cover most tag work. Filter chips let users toggle result sets: the checkbox variants handle this, with checked and unchecked states so a row of filters reads at a glance. Worth deciding deliberately: whether filters apply instantly or in a batch, a tradeoff Nielsen Norman Group has studied; instant suits short lists, batch suits slow queries.

Input tags are the second job: values users type into a field that become removable tokens, which is what the tags variants of the input components, multi-select fields, and select components are for. The tags here match those field versions, so a token looks identical inside and outside an input.

Wrapping, removal, and keyboards

Tag lists grow, so build the container with Auto Layout's wrap so tags flow to the next line instead of escaping the frame; each tag hugs its text and the list handles the rest. On removal, the X is a genuine click target with its own states, and in code it needs keyboard treatment too, so a keyboard user can reach and delete a token without a mouse.

That part is already done for you. Untitled UI React tags are open source, built with Tailwind CSS and React Aria, and mirror these Figma components, with focus management and keyboard removal handled properly.