组件 · 数据展示
Badge 徽标
计数/状态徽标；size/color/variant 为视觉属性。
使用建议
- 避免：杜撰 busy 属性
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
tsx
import { Badge } from '@selrux/ui/badge';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
已发布
代码演示
标签徽标
默认 mode="label"，用于状态文字。
默认已发布待审核已下线描边
计数徽标
mode="count" 包裹子元素显示角标，max 封顶。
信5单99+
显示控制与尺寸
show 控制徽标是否显示（如 0 条时隐藏）；size 六档。
不显示size xssize smsize mdsize lg
API
属性覆盖：示例用到 7 / 10 个自有属性（70%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Badge
将有限视觉属性映射到静态 CSS；显示规则完全复用 headless。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
mode | 默认模式，展示静态文本状态。 | "label" | "count" | "dot" | - |
count | - | string | number | - |
max | - | number | - |
showZero | - | boolean | - |
label | - | string | - |
placement | - | "top-start" | "top-end" | "bottom-start" | "bottom-end" | - |
show | 是否展示徽标；关闭计数/圆点时保留锚点。默认 true。 | boolean | true |
size | 显式尺寸优先于最近 Provider，最终回退 md。 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
color | 文本默认 secondary，计数与圆点默认 destructive。 | "info" | "success" | "warning" | "primary" | "destructive" | "carbon" | "secondary" | "accent" | secondary |
variant | 默认 solid；dot 始终实心，outline 对 dot 不生效。 | "outline" | "solid" | solid |
children | 可见状态文字，可组合 aria-hidden 的装饰图标。 | ReactNode | - |
另有 105 项原生属性与事件继承自 HTMLAttributes，原样透传。
导出类型：BadgeColor、BadgePlacement、BadgeProps、BadgeSize、BadgeVariant
无障碍
摘自源码 JSDoc。
Badge.children：可见状态文字，可组合 aria-hidden 的装饰图标。