Toggle Sidebar B
AppearanceLight & dark mode D

Status Mark

A 20px status glyph for agent task lists that morphs in place from a dashed idle ring to a spinning or real-progress arc, then draws a check or a cross, with an optional label strike.

Default

The preview plays a full lifecycle. Change the status, the progress or any other control to take over by hand.

Dark previewReplay previewOpen in new tab
Pending: Draft supplier emails

Customize

Status
Progress0.62
Ink
Done
Error
Size28px
Stroke2
Dashes8
Font Size16px
Spin1100ms
Arc Length0.68
Draw240ms
Fill0.06
Strike Delay60ms

API Reference

StatusMark

PropTypeDefaultDescription
status'pending' | 'running' | 'done' | 'failed' | 'cancelled''pending'The lifecycle state. Every change morphs the glyph in place.
progressnumberundefined0 to 1 while running. Leave it out for an indeterminate spinning arc.
labelstringundefinedText beside the glyph. It dims and gets struck.
colorstring'currentColor'Ring, arc, cancelled cross and label.
doneColorstring'#22c55e'Ring, wash and check when done.
errorColorstring'#ef4444'Ring, wash and cross when failed.
sizenumber20Glyph size in pixels. The label gap is half of it.
strokeWidthnumber2Stroke width in the 24-unit box. The ring shrinks to keep its margin.
dashesnumber8Dashes in the idle ring, the ones that fuse into the arc.
fontSizenumber14Label size in pixels. The strike scales with it.
spinDurationnumber1100Milliseconds per turn of the indeterminate arc.
arcLengthnumber0.68Share of the ring the indeterminate arc covers.
drawDurationnumber240Milliseconds the check or cross takes to draw.
fillOpacitynumber0.06The wash inside a finished ring.
strikebooleantrueStrikes the label through when done.
strikeDelaynumber60Milliseconds after the check starts before the strike wipes in.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • Without a label the glyph is an image named after the status and the progress. With a label, the status is read as hidden text in front of it.
  • With prefers-reduced-motion the glyph jumps between states and the indeterminate arc breathes instead of spinning.
Squish SwitchSwipe Row