Dot
dot状态圆点 · 5 语气状态色 + sm/md/lg + 呼吸 pulse(在线/进行中) + a11y label(role=status)(Tag/Chip 内嵌点的独立原语·纯CSS·RSC)
用法
语气色
tone 提供 neutral / brand / success / warning / danger 五档状态色。
tsx
<>
<Dot tone="neutral" />
<Dot tone="brand" />
<Dot tone="success" />
<Dot tone="warning" />
<Dot tone="danger" />
</>尺寸
size 提供 sm / md / lg 三档。
tsx
<>
<Dot size="sm" tone="brand" />
<Dot size="md" tone="brand" />
<Dot size="lg" tone="brand" />
</>呼吸（在线）
pulse 加 animate-ping 扩散动画表示活跃态；传 label 让读屏播报语义。
tsx
<Dot tone="success" pulse label="在线" />列表前导标记
Dot 作为行内原语，常做列表项的状态前导点。
服务运行中
tsx
<span className="inline-flex items-center gap-2">
<Dot tone="success" />
服务运行中
</span>何时用
需要一个最小的语义状态圆点（在线/处理中/错误）时用，可内嵌进 Tag/Chip 或独立放在文字前。它是纯展示原语；要的是「健康态四语义 + 状态文字 + 延迟数值」的成品行用 StatusDot；要叠加到图标四角并带计数用 Badge。
导入
ts
import { Dot } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| tone | "neutral"｜"brand"｜"success"｜"warning"｜"danger" | neutral | 语气色：neutral 默认 / brand 处理中 / success 在线/成功 / warning 警告 / danger 离线/错误。 |
| size | "sm"｜"md"｜"lg" | md | 尺寸。 |
| pulse | boolean | false | 呼吸扩散动画（在线/进行中等活跃态语义）。 |
| label | string | — | 提供则 role=status + aria-label（表意圆点）；不提供则 aria-hidden（纯装饰）。 |
禁忌 / 坑
暂无已知坑。label 决定无障碍语义：表意圆点（真在传达状态）务必传 label，否则它被 aria-hidden 当装饰，屏读用户读不到。候选坑 tauri-2-event-name-no-dot-character-set-restriction（Tauri 事件命名）与 timeline-dot-aligns-to-content-via-order-flip-not-pixel-push（时间线圆点对齐）均与本组件无关，不适用。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
<Dot tone="success" size="md" />