摆内容
徽标
Badge
「右上角小红点」「图标上的数字」「未读那个红圈」「99+」「消息红点」「小圆点提醒」「图标角上的数字」
LIVE DEMO真实可交互，动手试试
- 英文名
- Badge
- 别名 · 俗称
- 小红点角标数字圆点shadcn: Badge
- Web 叫法
- Badge
- 大白话定义
- 趴在图标右上角的小红点或数字，提醒你有几条没看的消息。
- 部位拆解
- 宿主图标 Host被标记的图标或入口
- 红点 Dot不带数字的纯提醒
- 数字 Count未读数量，超过 99 一般显示 99+
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
在消息图标右上角加徽标（Badge），显示未读数「3」，超过 99 显示「99+」，点击后清零
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的徽标（Badge）。逐一排除：未读数超过 99 没封顶，把宿主图标顶开撑破布局；徽标 absolute 定位但父元素没设 relative，红点跑到错误位置；消息已读后未读数没清零，红点一直挂着；纯红点缺 aria-label，屏幕阅读器读不出有几条未读。症状是：