Badge
表示数量、提醒或附着状态。中文惯用名：徽标。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.badge |
| 名称 | Badge |
| 二级分类 | 通用（general） |
| 用途 | 表示数量、提醒或附着状态 |
| 描述 | 中文惯用名：徽标。 |
预览
静态结构：渲染为 <span data-slot="badge">（inline-flex w-fit 圆角边框、px-2 py-0.5、text-xs font-medium）；variant 四档由 cva 映射底色——default 主色实心、secondary 次要色实心、destructive 危险色实心、outline 透明底 + border-border；文本取 text 属性。当前适配器为静态文本徽标形态，不内置角标定位（附着于图标 / 头像右上角的角标需外层容器自行定位）。
DSL 结构
{
"type": "Badge",
"props": {
"text": "次要",
"variant": "secondary"
}
}何时用
何时使用
- 表达数量、提醒或附着状态：未读条数、待办数量、对象上的状态备注。
- 需要与主体并列的轻量标记：卡片标题旁的「新」「测试版」、列表项后的计数。
- 需要视觉权重低于正文的短标记：variant 四档控制底色强弱（default / secondary / destructive / outline）。
何时不用
- 标记分类、属性或可移除条件：使用 Tag（Badge 不与 Tag 混用）。
- 表达运行 / 审核等业务状态（带状态点 + 文本）：使用 Status。
- 需要点击的操作入口或筛选条件：使用 Button / Tag，Badge 只读不可交互。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| default | 主色实心 | 最高权重的短标记（如「新」） |
| secondary | 次要色实心 | 中性计数、普通备注 |
| destructive | 危险色实心 | 异常计数、需要立即关注的数量 |
| outline | 透明底 + 描边 | 低干扰标记、与浅色背景并置 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text | string | — | 徽标文本（计数 / 短标记） |
variant | `'default' | 'secondary' | 'destructive' |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式（角标定位常在此声明） |
使用规范
- 文案极短：计数直接用数字，标记不超过 4 个字。
- 同一语义固定同一 variant（如危险计数恒为 destructive），不随场景换色。
- 计数超量级时收敛显示（如「99+」），避免徽标宽度撑破布局。
- 不在 Badge 上挂交互；需要点击时改用 Button 或 Tag。
正例
- ✓ 菜单项：标题后 Badge text="12" 表示待办数量。
- ✓ 卡片标题：Badge variant="outline" text="Beta" 标注功能阶段。
反例
- ✕ 用 Badge 标记商品分类或可移除筛选条件（应使用 Tag）。
- ✕ 用 Badge 表达服务运行状态（应使用 Status）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。