徽标

Badge

UI 组件也叫：徽章、角标、小红点、计数标记

一句话：叠在图标、头像或按钮右上角的小红点或小数字，提醒用户这里有未读消息或新内容。

详细解释

徽标是贴在另一个元素右上角的小圆点或小数字，例如铃铛图标上的「3」、头像上的红点、菜单项旁的「New」。它本身不能点击，只负责提醒「这里有新东西、有几条」，用户处理之后就应该消失或数字减少。数字过大时通常显示成「99+」。

徽标和标签经常被混用，区别在于位置和含义：徽标附着在别的元素角上，内容是数量或有没有新内容；标签独立排在文字旁边，内容是分类、状态或属性，例如「已发货」「前端」。shadcn/ui 和 Bootstrap 里名为 Badge 的组件，很多时候其实是这里说的标签。

徽标多用红色来吸引注意，所以要克制使用，页面上到处都是红点，用户反而会视而不见。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

在导航栏的铃铛图标右上角加一个红色数字徽标，显示未读消息数，超过 99 时显示「99+」，为 0 时整个徽标隐藏。徽标高 16px、白色数字、胶囊形，边缘压在图标右上角。侧边菜单里新上线的功能旁显示一个不带数字的小红点。

由被包裹的目标元素（图标、头像、按钮）和叠在其右上角的小圆点或数字气泡组成。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。