Components / Status indicators

Status Dot

Small animated indicators to represent live statuses like online, offline, or busy.

Online
Away
Busy
Offline

Progress

A linear status component representing task completion.

Definite (30%)
Indeterminate

Meter

A visual representation of a scalar value within a known range.

Server CPU Load45%
Battery Level100%

StatusDot API

Prop / EventTypeDefaultDescription
intentstring'default'Color intent: 'default', 'success', 'warning', 'danger', or 'info'.
pingbooleantrueWhether to show the animating radar ring.

Progress API

Prop / EventTypeDefaultDescription
valuenumber0Progress percentage (0-100).
indeterminatebooleanfalseIf true, displays an animated endless loading bar.
intentstring'default'Color intent: 'default', 'success', 'warning', 'danger', or 'info'.

Meter API

Prop / EventTypeDefaultDescription
valuenumber0Current measurement value.
minnumber0Minimum bounds.
maxnumber100Maximum bounds.
lowThresholdnumber33Upper bound of the low range.
highThresholdnumber66Lower bound of the high range.
optimumnumber50Optimal value, determines color direction (e.g. if 0 is optimal, high values turn red).
labelstring''Screen reader label and visible label text.
showLabelbooleanfalseWhether to render the label text visibly.