StatusTag

A status as a coloured dot and a word.

import { StatusTag } from '@zitdevs/ui';

Examples

HealthyNeeds reviewCriticalMonitoringRetired

HealthyNeeds reviewCriticalMonitoring

<StatusTag tone="warn" label="Needs review" />
<StatusTag tone="danger" label="Critical" surface="dark" />

Props

Prop	Type	Default	Notes
label	string	required	The word carries the status.
tone	StatusTone	'ok'	Colours the dot only: ok, warn, danger, info, neutral. See below.
surface	Surface	'light'	dark on the inverse or the primary band.
ref	Ref<HTMLSpanElement>	—	The outer <span>.
className	string	—	Placement.
anything else	<span> attributes	—

Exported type: StatusTagProps. StatusTone is the kit’s shared vocabulary.

Accessibility

• Text, not a control. The dot is an empty aria-hidden span: what is read is the label alone, with no screen-reader copy beside it.
• Never let the colour say what the word does not: “Critical” in words, the dot only repeats it.
• Green is reserved for ok; never use it for a pending or planned state.

Use instead: see the label look-alikes under Tag.

Without JavaScript

It needs none: two <span>s, rendered as a Server Component.

Theming

The word is ink on a light field and on-inverse-quiet on a dark one. The dot reads success (ok), warning (warn), primary-inverse (info) and border-strong (neutral).

The danger dot is drawn in accent, the brand’s orange, as the website draws it: the word carries the meaning. A product that re-themes --ui-accent re-themes that dot with it, so keep its accent legible as a warning colour, or keep green out of it, since green belongs to ok.