Skip to main content
Frontend Glossary

UI components · Data display

Tag

Also called: Chip, Label, Pill, Badge (shadcn/ui)

A small rounded marker next to text that uses a word or two to show a category, status, or attribute, like "Shipped" or "Frontend."

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

In the status column of the orders table, show the status as a tag: "Pending payment" in orange, "Shipped" in blue, "Completed" in green, and "Canceled" in gray. Each uses a light background with darker text in the same color family, 22px tall, with 4px rounded corners and a 12px font. In the filter bar, show selected conditions as tags too, each with a small × on the right that removes that condition when clicked.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Tag is what you need.

Use Tag when

  • Marking each record's status in a table or list, like Paid or Canceled
  • Labeling articles, products, or projects with categories or attributes, when one item can have several tags
  • Showing selected filter conditions in a filter bar and letting users remove them one by one
  • Showing multiple keywords or recipients a user has entered inside an input

Pick something else when

  • Showing how many unread messages an icon has

    Use insteadBadge

  • The main action entry points on a page. Use buttons, not something that looks like a tag.

    Use insteadButton

  • A message that needs a full sentence of explanation

    Use insteadAlertTooltip

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Seven or eight tags in different colors on one record, turning the page into a riot of color where nothing stands out

  2. 02

    Styling actions like "Submit" or "Delete" as tags, so users can't tell they're clickable

  3. 03

    Using different colors for the same status on different pages, so users never learn what the colors mean

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A rounded container with a background color or border holding short text. Can have a leading icon or a close button on the right.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A tag is a small rounded block with a background color or border, holding a word or two of short text that marks a piece of content's category, status, or attribute. You'll see them in a table's status column ("Paid," "Canceled"), as topic tags on articles, as "New" or "Free shipping" on products, and as selected conditions in a filter bar. Different statuses often get different colors, and tags can have a close button so users can remove them.

Tag versus badge: a tag sits on its own next to text and says "what this is, or what state it's in." A badge overlaps the corner of an icon or avatar and says "you have this many new messages." The Badge components in shadcn/ui and Bootstrap are mostly tags in both look and purpose.

Also keep tags apart from buttons. By default a tag only shows information and doesn't carry the main actions. Clickable tags (like filter tags) need hover and selected states so users know they can click them.

Developer info
Term ID
component-tag
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-tag
  • .el-tag
  • [class*="MuiChip-root"]
  • .arco-tag
  • .t-tag
  • .n-tag
  • [data-slot="badge"]
  • .badge:not(.position-absolute):not(.translate-middle)
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026