StatusIndicator

Updated: May 9, 2025

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" />

Supports full Once UI palette for flexibility.

Colors

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

Prop	Type	Default
size Dot size.	lms	m
colorrequired Which state it shows.	blueindigovioletmagentapinkredorangeyellowmossgreenemeraldaquacyangray	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	—

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club