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

Props, events, and slots for each sub-component.

StatusIndicator

Props

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