Badge vs. Chip vs. Pill vs. Tag 徽标 Badge vs. 碎片 Chip vs. 胶囊 Pill vs. 标签 Tag web
Compact labels distinguished by meaning, shape, and interactivity
同样是小标签，靠含义、形状和可交互性来区分
Badge
Chip
Design
Pill
Active
Tag
Web
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Badge anchor徽标锚点
Badge“The icon the little number bubble sits on” is the badge anchor.
「数字小气泡趴在上面的那个图标」就是徽标锚点。
Prompt fragmentPrompt 片段the shadcn/ui Badge anchor, with the compact count overlapping its parent icon's upper corner
shadcn/ui Badge 的锚点：紧凑计数叠在父图标的上角
-
2 Badge count徽标计数
Badge“The tiny number inside the red bubble” is the badge count.
「红气泡里的小数字」就是徽标计数。
Prompt fragmentPrompt 片段the compact count inside a shadcn/ui Badge, using a circular shape for one digit and a capsule for longer counts
shadcn/ui Badge 里的紧凑计数：一位数用圆形，多位数用胶囊形
-
3 Chip remove buttonChip 删除按钮
<button aria-label>“The little x inside the filter pill” is the chip's remove button.
「筛选胶囊里那个小 ×」就是 chip 的删除按钮。
Prompt fragmentPrompt 片段the trailing <button aria-label> remove affordance inside a dismissible chip
可关闭 chip 里末尾的 <button aria-label> 删除操作
-
4 Selected chip stateChip 选中态
aria-pressed“The filter pill that stays filled after I click it” is the selected chip state.
「点过之后一直实心填充的那个筛选胶囊」就是 chip 的选中态。
Prompt fragmentPrompt 片段the aria-pressed selected state of an interactive chip, with a persistent filled treatment
可交互 chip 的 aria-pressed 选中态，用持续的实心填充样式
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Use a Badge for the compact unread count, a dismissible Chip for the active filter, a fully rounded Pill for short status text, and a Tag for category metadata. Use shadcn/ui Badge for the non-interactive labels and give any icon-only remove button an aria-label.
未读数用 Badge（徽标），当前生效的筛选用可关闭的 Chip，短状态文字用全圆角的 Pill（胶囊），分类元数据用 Tag（标签）。不可交互的标签用 shadcn/ui Badge；纯图标的删除按钮要给 aria-label。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my badge/chip/pill. Rule out: unbounded counts blowing the layout instead of capping at 99+; the pill wrapping mid-label without white-space nowrap; a chip delete target far smaller than 24px so taps miss; low-contrast fills failing in dark mode because the colors were not themed as a pair. The symptom:
调试我的 Badge/Chip/Pill。排查：计数没有封顶，撑爆布局——超过 99 显示 99+；胶囊文字从中间换行——缺 white-space: nowrap；chip 的删除点击区域远小于 24px，点不中；深色模式下低对比度填充看不清，因为配色没有成对地做主题适配。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| shadcn/ui | Badge | |
| HTML | <button> | for a removable or selectable chip用于可删除或可选中的 chip |
| ARIA | aria-label |