Tag
内容标签
WebMobileDesktop上手难度: 容易
贴在内容旁边表示分类或状态的小标签，点不了。
Live Demo
真的可以点Live Demo Playground
IMG_0231 海岸线视频
clip_01 延时摄影视频已收藏
IMG_0155 旧照片视频
你刚才看到的这个：GitHub Issue 上的彩色 label、博客文章顶部的「前端 / 性能」分类、照片库里的「视频」角标。
它到底是什么
Tag 是 Chip 的只读版本：它只用来标记「这是什么」，不能点。它的价值在于让用户快速扫读时就能分类——比如一列照片里哪些是「视频」哪些是「已收藏」。
标签tag内容标签分类标签label状态标签
Anatomy · 它由什么组成
Pill胶囊
圆角全满，浅色底
Text文字
12px，同色系深色
Color颜色
代表语义，不是装饰
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 标记内容的分类或状态 | 用 |
| 帮助快速扫读时分清类型 | 用 |
| 多个内容并排展示时区分属性 | 用 |
| 点击后应触发筛选或导航 | 不用 |
| 需要用户选择它 | 不用 |
颜色是 Tag 的主要信息通道——超过 6 种颜色后用户就无法凭颜色分类了。
Tag 和 Badge 的区别：Tag 在内容上，Badge 在图标上。
Similar Patterns
别搞混一句话区分：贴在内容旁边表示分类或状态的小标签，点不了。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在每张卡片底部加一个内容 Tag，用不同颜色表示类型（如「视频」蓝、「收藏」黄、「已编辑」灰），不可点击。
不要只对 AI 说
Bad → Better不要这样对 AI 说
给内容加个标签。
改成这样说
加内容 Tag：浅底深字同色系（保证 4.5:1 对比）、圆角全满 padding 2px 8px、最多 4–5 种语义色全局统一、不加 hover 和 pointer 以表明只读。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。