StatusIndicator – Once UI

Use StatusIndicator to show online/offline presence, availability, or categorical tags through color-coded dots.

StatusIndicator

<StatusIndicator color="green" />
<StatusIndicator color="red" />
<StatusIndicator color="yellow" />

Sizes

Choose from small, medium, or large to fit the surrounding layout.

Sizes

<StatusIndicator size="s" color="blue" />
<StatusIndicator size="m" color="blue" />
<StatusIndicator size="l" color="blue" />

Color variants

Supports full Once UI palette for flexibility.

Colors

<StatusIndicator color="blue" />
<StatusIndicator color="indigo" />
<StatusIndicator color="violet" />
...
<StatusIndicator color="gray" />

Theme roles

A role (brand, accent, neutral, info, danger, warning, success) takes the colour the theme assigns it, so danger follows the app's danger scheme. A palette name stays that fixed colour; rose, mint, dusk, sand and slate are there as well.

Roles

<StatusIndicator color="success" ariaLabel="Online" />
<StatusIndicator color="warning" ariaLabel="Degraded" />
<StatusIndicator color="danger" ariaLabel="Down" />
<StatusIndicator color="brand" ariaLabel="Syncing" />
<StatusIndicator color="sand" ariaLabel="Archived" />

API reference

	Type	Default
size Dot size.	lms	m
color Which state it shows: a palette name, or a theme role such as danger or brand.	StatusIndicatorColor	blue
ariaLabel What assistive tech announces. Set it to the meaning, not the colour.	string	`${color} status indicator`
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—