DotIndicator
A bare coloured dot with text, the status primitive for table cells and footer aggregates.
Usage
DotIndicator
Connection strength
The dot carries the colour and the text carries the meaning; neither works alone.
Loading demo...
Best Practices
- Prefer a
label. Colour must never be the only carrier of state — neither a colour-blind reader nor a greyscale screenshot can tell red from green. - Use the
ariaLabelform only when something else in the same row already conveys the meaning. - Take colours from
--tx-bui-*or--tx-color-*variables; a hardcoded hex will not follow a theme change. - In a footer aggregate, wrap the default slot in
<strong>to emphasise the figure while keeping the dot aligned.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | 'currentColor' | Dot colour; any CSS colour or custom property |
label | string | - | Text beside the dot |
size | number | 8 | Dot diameter in pixels |
ariaLabel | string | - | Accessible name used when there is no visible text |
Slots
| Name | Description |
|---|---|
default | Replaces the text beside the dot |
How It Differs From StatusBadge
These are not interchangeable, and picking the wrong one gives you a control that is wrong in both size and meaning.
TxDotIndicator | TxStatusBadge | |
|---|---|---|
| Shape | Bare dot plus plain text | Bordered pill with an icon |
| Palette | Any colour | Five fixed semantic tones |
| Use | Dense contexts: table cells, footer aggregates | A standalone status marker |
A column of dozens of pills is heavy and pulls the eye away from the data, which is exactly why this primitive exists.
Overview
The component resolves its own identity in the accessibility tree three ways, so it never announces an empty element:
| Given | Result |
|---|---|
A label or default slot | The text speaks for it; no extra role or aria-label is added |
Only ariaLabel | Becomes role="img" carrying that name |
| Neither | Treated as decoration, aria-hidden="true" |
The text uses tabular figures, so percentages and ratios do not shift sideways as the numbers change.
Technologies
- Component source:
packages/tuffex/packages/components/src/dot-indicator/src/TxDotIndicator.vue. - Types:
packages/tuffex/packages/components/src/dot-indicator/src/types.tsexportsDotIndicatorProps. - Test coverage:
packages/tuffex/packages/components/src/dot-indicator/__tests__/dot-indicator.test.tshas 5 cases covering the colour and size variables, all three accessibility identities (decorative /role="img"/ carried by visible text), and the default slot.
查看源码
packages/tuffex/packages/components/src/dot-indicator/index.ts
- Provenance: Adapted from Beautiful UI (https://www.beautifului.dev), © 2026 Shane Levine, MIT.
- Why not reuse
TxStatusBadge: that component is a bordered pill locked to five tones with an icon; it accepts no arbitrary colour and does not suit dense table contexts. - Accessibility: Upstream's dot is purely visual with no accessibility handling at all; this port adds the three-way identity resolution.