跳到正文
GitHub

展示

StatusDot

状态词旁边的那个点。

示例

tones

Live Degraded Down Idle

说明

状态词旁边的那个点。

无一例外地 aria-hidden:这个点重复的是旁边标签已经说过的状态,而读屏软件把“可接洽”念两遍,比压根不播报这个装饰更糟。如果某个调用处没有可见标签,解法是加标签,不是给这个点加 aria-label

光晕是一个独立的绝对定位圆环,而不是 box-shadow,因为这套系统的法则 2 是“阴影从不模糊”——而且它是 motion-safe 的,所以要求减少动效的读者拿到的是一个静止的点。

属性

StatusDot props
属性类型默认值说明
pulsebooleantrue一圈会扩散并消散的光晕,表示“此刻在线”。已经稳定的状态请关掉。
size'sm' | 'md''md'7px / 8px。默认 `md`。
toneStatusTone'success'

同时接受 HTMLAttributes<HTMLSpanElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

类型

export type StatusTone = 'success' | 'warning' | 'danger' | 'neutral'

无障碍

  • 一律 aria-hidden:它重复的是旁边标签已经说过的状态。
  • 光晕只在 motion-safe 下运行,要求减少动效的读者看到的是静止的点。