Dot
dotRenders a semantic or arbitrary-color status indicator with optional pulse and accessible labeling.
Usage
Tone color
tone provides neutral / brand / success / warning / danger five-level status colors.
<>
<Dot tone="neutral" />
<Dot tone="brand" />
<Dot tone="success" />
<Dot tone="warning" />
<Dot tone="danger" />
</>Dimensions
size provides three gears sm / md / lg.
<>
<Dot size="sm" tone="brand" />
<Dot size="md" tone="brand" />
<Dot size="lg" tone="brand" />
</>Breathe (Online)
pulse Add animate-ping diffusion animation to indicate the active state; pass label to let the screen reader broadcast the semantics.
<Dot tone="success" pulse label="Online" />Any color (chart legend)
color connects to the semantic color name / any CSS color, the same resolveTone path as ChartSeries.color and Brand.color - the fifth gear tone cannot be connected chart-1..6. Note that style={{ color }} cannot change the dots (that is the text color and is silently disabled).
<>
<Dot color="chart-1" />
<Dot color="chart-2" />
<Dot color="chart-3" />
<Dot color="#ff8800" />
</>List leader tag
Dot As an inline primitive, it is often used as the status leader point of list items.
<span className="inline-flex items-center gap-2">
<Dot tone="success" />
The service is running
</span>When to use
Use Dot for the smallest online, processing, warning, or error indicator. Use StatusDot for a complete health row or Badge for corner counts.
Import
import { Dot } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| tone | "neutral"|"brand"|"success"|"warning"|"danger" | neutral | Semantic color. |
| color | string | — | Any dot color: a semantic color name such as chart-2 or primary, any CSS color, or a CSS variable resolved through resolveTone. Takes precedence over tone, and keeps custom chart legends in sync with their series. |
| size | "sm"|"md"|"lg" | md | Dot size. |
| pulse | boolean | false | Breathing animation for active states. |
| label | string | — | Adds role=status and an accessible label; omission makes it decorative. |
Usage notes
- `style={{ color }}` does not change the dot and fails silently. The dot is painted with a background color, while the CSS
colorproperty affects text. Use thecolorprop for custom colors. - Provide
labelwhenever the dot conveys status. Without it, the dot isaria-hiddenand treated as decoration. toneintentionally covers only five semantic colors. Usecolorfor chart-series colors such aschart-1throughchart-6instead of rebuilding the dot with Tag or a bare<span>.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
<Dot tone="success" size="md" />