StatusIndicator

Inline service-status dot and label — operational, degraded, outage, or maintenance.

The StatusIndicator component from @publier/shell renders a colored status dot with a label — useful on status pages, in the header of a service doc, or inside a changelog entry.

Usage

import { StatusIndicator } from '@publier/shell/components';

<StatusIndicator status="operational" />
<StatusIndicator status="degraded" service="API" />
<StatusIndicator status="maintenance" label="Scheduled maintenance until 22:00 UTC" />

Props

Prop	Type	Default	Description
`status`	`'operational' \| 'degraded' \| 'outage' \| 'maintenance'`	required	Semantic status level.
`label`	`string`	auto	Override label text. When omitted, defaults to a canonical label per status (see below).
`service`	`string`	`undefined`	Optional service name — shown before the label and used in the accessible name.

Default labels

Status	Default label
`operational`	`Operational`
`degraded`	`Degraded performance`
`outage`	`Major outage`
`maintenance`	`Under maintenance`

Behaviour

Renders as <span role="status"> — screen readers announce changes politely.
The colored dot is marked aria-hidden so the label carries the semantics.
Accessible name is built as "{service} {label-lowercased}" when service is set (e.g. "API degraded performance") — so the phrase reads naturally. When service is unset, the label renders verbatim.