Skip to content

Display

StatusPill

A live state, named: a dot plus an uppercase mono label.

Examples

default

Available for workPartial outage

Notes

A live state, named: a dot plus an uppercase mono label in an outlined pill.

One component rather than a dot and a pill assembled per call site, which is how the same "available for work" chip ended up with three different dot sizes and two different pulse timings on one site.

Props

StatusPill props
PropTypeDefaultDescription
childrenrequiredReactNode
pulsebooleantruePulsing live dot (default) vs a settled one.
toneStatusTone'success'

Also accepts everything in HTMLAttributes<HTMLSpanElement>. Those are forwarded to the underlying element and are not listed row by row.