Tag

A compact chip that names a value someone has applied or can pick — a label, a filter, a skill — and can be removed or toggled.

Preview

When to use

• To show values applied to an item, each with a remove button.
• As a set of filters or topics that switch on and off.

Reach for something else

• For a read-only status: that is a Badge.

Anatomy

1. 1

   Container

   A rounded chip with a hairline border.

2. 2

   Leading icon or dot

   Optional, for the tag's type or colour.

3. 3

   Label

   The value, kept short.

4. 4

   Remove button

   A small × at the end, when the tag can be removed.

States

Accessibility

• A selectable tag is a <button> with aria-pressed, so its state is announced.
• The remove button is its own <button> with an aria-label such as "Remove Design".
• After a tag is removed, focus moves to the next tag or the field, never to the page top.

Source

The 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