Status Indicator Web Component Playground

Click a state, scrub across the dots, or use the arrow keys. The readout updates whenever the component emits a change event.

Each row starts on a different value. Every instance remains fully interactive, so transitions can be compared from any starting point.

The same component adapts to a near-black workspace and a quiet neutral canvas through CSS custom properties.

A four-step publishing flow shows how labels, colors, icons, and the number of states can be replaced at runtime.