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="在线" />任意色（图表图例）
color 接语义色名 / 任意 CSS 色，与 ChartSeries.color、Brand.color 同一条 resolveTone 路径——五档 tone 接不住 chart-1..6。注意 style={{ color }} 改不动圆点（那是文字色，静默失效）。
tsx
<>
<Dot color="chart-1" />
<Dot color="chart-2" />
<Dot color="chart-3" />
<Dot color="#ff8800" />
</>列表前导标记
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 离线/错误。 |
| color | string | — | 任意圆点色：语义色名（chart-2/primary…）、任意 CSS 色或变量，走 resolveTone。与 tone 同传时 color 优先。图例色点跟图表序列同色时用它。 |
| size | "sm"｜"md"｜"lg" | md | 尺寸。 |
| pulse | boolean | false | 呼吸扩散动画（在线/进行中等活跃态语义）。 |
| label | string | — | 提供则 role=status + aria-label（表意圆点）；不提供则 aria-hidden（纯装饰）。 |
禁忌 / 坑
- `style={{ color }}` 改不动圆点颜色，而且是静默失效：圆点是背景色，
color管的是文字色，于是写成<Dot style={{ color: series.color }} />会编译通过、guard 只报no-style-override、页面上一律灰点（bg-muted），写的人以为生效了。自定义颜色只走colorprop。 label决定无障碍语义：表意圆点（真在传达状态）务必传label，否则它被aria-hidden当装饰，屏读用户读不到。tone只有五档语义色，接不住图表序列色（默认取值就是chart-1..6）——那是color存在的原因，别为一个色点去拆 Tag 或裸写<span>。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
<Dot tone="success" size="md" />