DotIndicator
A status primitive: a colored dot beside text.
Usage
Basic
color tints the dot; label or the default slot supplies the text.
Loading demo...
Best Practices
- Prefer a
label: color must never be the only carrier of state. - Use
ariaLabelalone only when other text in the same row already conveys the meaning. - Take colors from
--tx-bui-*or--tx-color-*variables; a hardcoded hex won't follow the theme. - In a footer aggregate, wrap the slot text in
<strong>to emphasize the figure; the dot stays aligned. - Use the dot in dense contexts such as table cells and footers; use
TxStatusBadgefor a standalone status marker.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | 'currentColor' | Dot color; any CSS color or custom property. |
label | string | - | Text beside the dot. |
size | number | 8 | Dot diameter in px. |
ariaLabel | string | - | Accessible name when there is no visible text. |
Slots
| Name | Description |
|---|---|
default | Replaces the text beside the dot. |
Overview
- With a
labelor the default slot, the text carries the meaning; no role oraria-labelis added. - With only
ariaLabel, it renders asrole="img"with that name. - With neither, it is decoration and gets
aria-hidden="true". - The text uses tabular figures, so changing numbers don't shift sideways.
Technologies
- Source:
packages/tuffex/packages/components/src/dot-indicator/. - Adapted from Beautiful UI (© 2026 Shane Levine, MIT); upstream's dot is purely visual, and this port adds the three accessibility identities.
查看源码
packages/tuffex/packages/components/src/dot-indicator/index.ts