Activity | Glaze design system

Sizes

When to use it

Use: A product without a thread shows one live line for an agent: "Searching docs", then "Searched docs".
Use: The first wait of a turn needs a loader that never flashes for a fast reply.
Use: A summary line should fold rows that came before.
Not for: The calls themselves, with their output. Use Tool call.
Not for: Where a piece of work stands in a list or table. Use Status.

6 rules

Must: Write label as an -ing verb and its object, and pass active while the work runs. Because the done line is its past tense, so "Searching docs" settles into "Searched docs"; a noun has no past tense.
Must: Use waiting for the first gap of a turn, before any token, reasoning or call. Because it waits 150ms before it shows and holds 400ms once shown, so a fast reply never flashes a loader.
Should: Feed it from a turn's calls with toolActivity(calls) rather than hand-picking a phrase. Because it follows the newest running call, never headlines a failure, and settles on a summary like "Edited 3 files, 1 failed".
Must: Pass status="warn" or "fail" when the work ended badly; never colour the label yourself. Because the word in its status colour is what survives grayscale, forced colours and a screen reader.
Should: Set announce={false} inside a Conversation. Because the thread announces the turn's end itself, and two regions read the same news twice.
Never: Add a spinner or animated dots of your own; the pending arc is the only loop. Because Glaze has one loop, and it stands still under reduced motion while the word still says running.

3 states, highest first

4 checks

: One polite status region reads the loader's label and the settled phrase; live phrases are not read.
: The arc is aria-hidden; aria-busy is set while waiting or active.
: Warn and fail add their word, never colour alone.
: An ActivityGroup line is a button with aria-expanded.

5 edge cases

A burst of phrases: Each holds 1s; ones that arrive in between are skipped.
A tool ends and the next starts: The 400ms settle reads them as one live line.
Reply in 80ms: The loader never shows.
Summary already says "1 stopped": The end word is not read twice.
Reduced motion: The arc stands still.

10 props

label: string
active: boolean default false
waiting: boolean default false
doneLabel: string default past tense of label
status: 'ok' | 'warn' | 'fail' | 'stopped' default 'ok'
size: 'default' | 'sm' default 'default'
minDisplay, settle, delay, minLoader: number default 1000, 400, 150, 400
announce: boolean default true
ActivityGroup summary, meta, live, size: ReactNode, ReactNode, boolean
StepGlyph state: 'running' | 'done' | 'fail' | 'stopped'

13 tokens