展示
StatusDot
状态词旁边的那个点。
示例
tones
Live Degraded Down Idle
说明
状态词旁边的那个点。
无一例外地 aria-hidden:这个点重复的是旁边标签已经说过的状态,而读屏软件把“可接洽”念两遍,比压根不播报这个装饰更糟。如果某个调用处没有可见标签,解法是加标签,不是给这个点加 aria-label。
光晕是一个独立的绝对定位圆环,而不是 box-shadow,因为这套系统的法则 2 是“阴影从不模糊”——而且它是 motion-safe 的,所以要求减少动效的读者拿到的是一个静止的点。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| pulse | boolean | true | 一圈会扩散并消散的光晕,表示“此刻在线”。已经稳定的状态请关掉。 |
| size | 'sm' | 'md' | 'md' | 7px / 8px。默认 `md`。 |
| tone | StatusTone | 'success' | — |
同时接受 HTMLAttributes<HTMLSpanElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
类型
export type StatusTone = 'success' | 'warning' | 'danger' | 'neutral'无障碍
- 一律 aria-hidden:它重复的是旁边标签已经说过的状态。
- 光晕只在 motion-safe 下运行,要求减少动效的读者看到的是静止的点。