Badge 徽标Badge
一个词说明状态:已发布、待审核、失败。徽标表示状态,Tag 表示归类,Count 表示数量,三者不要混用。
状态色
六种 tone。默认的 soft 变体是柔和底配同色相的深色文字(--ok-*-text)。
草稿新功能已发布待审核失败测试中
变体
solid 是实色底,更醒目,一屏里别超过一两处(不带 tone 的 solid 是强调色,和原型一致);ink 是反色底,不带状态含义,用于“Pro”“Beta”这类标记。
默认新功能已发布待审核失败测试中
ProBeta
状态点
dot 在文字前加一个同色的圆点;ping 让圆点向外扩散,表示“正在进行”。开了减弱动效时扩散会停下。
运行中排队中已停止直播中同步中
规格
- 徽标
- 高 24 · 全圆 · 12px / 600
- 状态点
- 扩散 3.2× · 1.8s 循环
接口
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
tone | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 状态色。 |
variant | 'soft' | 'solid' | 'ink' | 'soft' | soft:柔和底 + 同色相文字;solid:实色底;ink:反色底。 |
dot | boolean | — | 文字前的状态点。 |
ping | boolean | — | 状态点向外扩散(“进行中”)。隐含 dot。 |
...rest | HTMLAttributes<HTMLSpanElement> | — | 其余原生属性透传到根节点。 |
无障碍
- 徽标是普通的
span,没有角色,读屏直接读文字。所以文字本身必须说清状态,不能只靠颜色(不要写一个只有颜色没有字的徽标)。 - 状态点是装饰,对读屏隐藏。
- 状态会动态变化、需要播报时,把徽标放进一个
role="status"的容器,而不是给徽标本身加角色。 - 不可聚焦,没有键盘操作。需要可点击的筛选项请用 Chip。