Status Indicator

Colour-coded dot with a status label. Maps a string status to a colour and animates a slow ping ring. Hide the label for a pure dot.

Default

Dot plus label, colour derived from the status string.

Available

Status values

Available statuses: Available (green), Coming soon / Upcoming / Maintenance (yellow), Sold out / Unavailable (red). Toggle show-status-label off for a pure dot.

Available

Coming soon

Maintenance

Sold out

API Reference

StatusIndicator

Prop	Type	Default	Description
`status`	`string`	—	Required. Status string; colour is derived from the value (case-insensitive). See variants section for the recognised values.
`showStatusLabel`	`boolean`	`true`	Show the status text next to the dot. Set false for a bare indicator.

Stack Stepper