Badge
角标
WebMobileDesktop上手难度: 容易
贴在图标角落的一个小标记，用来表示「有东西需要你看」。
Live Demo
真的可以点你刚才看到的这个：微信底 tab 上的未读红点、App 图标右上角的「99+」、导航栏「消息」图标右上角的数字。
它到底是什么
Badge 是「元信息中的元信息」：它自己不承载内容，只在某个元素上挂一个状态。最常见的是红点（未读）和数字（未读数）。它的滥用会造成「红点疲劳」。
角标badge徽标小红点红点notification badge
Anatomy · 它由什么组成
Anchor宿主元素
图标或头像
Bubble角标
绝对定位在右上角
Count数量
>99 显示 99+
Dot纯红点
无数字，仅表示「有」
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 表示有未读内容或新消息 | 用 |
| 需要引起注意但不需要立即处理 | 用 |
| 在图标右上角标记状态 | 用 |
| 表示数量统计（购物车 3 件） | 用 |
| 表示一个「正常」状态 | 不用 |
红点一旦到处都有，用户就会全部无视。宁可少用。
99+ 的红点如果没有数字，用户会困惑「到底多少条」。
Similar Patterns
别搞混一句话区分：贴在图标角落的一个小标记，用来表示「有东西需要你看」。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在底部导航「消息」图标右上角加 Badge：未读 5 条时显示数字，超过 99 显示「99+」，0 条时隐藏，悬停时显示 Tooltip「5 条未读消息」。
不要只对 AI 说
Bad → Better不要这样对 AI 说
给图标加个红点提示。
改成这样说
给图标加 Badge：绝对定位右上角、红底白字胶囊、>99 显示「99+」、0 时隐藏，宿主加 aria-label="N 条未读"，红点不可滥用避免视觉疲劳。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。