Tag
内容标签
A small non-interactive label attached to content to mark its category or status — you can look at it, not click it.
Live Demo
Actually clickableWhat you just saw:Colored labels on GitHub issues, category chips at the top of a blog post ("Frontend" / "Performance"), a "Video" tag in a photo library.
What it actually is
A tag is the read-only member of the chip family: it only tells you what something is, it never does anything. Its value is that it lets users sort content by category at a glance while scanning — which items in a photo grid are videos, which are favorited.
Anatomy · What it's made of
Pill胶囊
Fully rounded, light background
Text文字
12px, darker shade of the same hue
Color颜色
Carries meaning, not decoration
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Marking the category or status of content | Yes |
| Helping users tell types apart while scanning | Yes |
| Distinguishing attributes of items shown side by side | Yes |
| Clicking it should filter or navigate somewhere | No |
| The user needs to select it | No |
Color is the tag's primary information channel — past about six colors users can no longer categorize by color.
Tag versus badge: a tag sits on the content, a badge sits on an icon.
Similar Patterns
Don't mix these upTagCurrent
内容标签
A small non-interactive label attached to content to mark its category or status — you can look at it, not click it.
Badge
角标
A tiny marker pinned to the corner of an icon or avatar that says "there is something you need to look at".
In one line:A small non-interactive label attached to content to mark its category or status — you can look at it, not click it.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a content Tag at the bottom of every card, using color to signal type ("Video" blue, "Favorited" amber, "Edited" gray). Not clickable.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a tag to the content.
Say this instead
Add content Tags: light background with darker same-hue text (holding contrast at 4.5:1 or better), fully rounded with padding 2px 8px, at most four or five semantic colors used consistently app-wide, and no hover or pointer cursor so they read as read-only.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.