Activity | Sodium design system

Sizes

waiting
Writing partitions14s
active
Compacting files15s
scrambling
Wrote 1,204 partitions and compacted 12 files.Wrote 1,204 partitions and compacted 12 files. Done
done
Wrote 1,204 partitions, 3 were late.Wrote 1,204 partitions, 3 were late. Warnings
warnings
Wrote 812 of 1,204 partitions.Wrote 812 of 1,204 partitions. Failed
failed
Wrote 812 partitions.Wrote 812 partitions. Stopped
stopped

When to use it

Use: A run, a job or an agent turn needs one line that says what it is doing now, and then what it did.
Use: The head of a run's page, a message, or a dense panel where the steps themselves are folded away.
Not for: Every step should show, in order. Use Tool-call row.
Not for: An action the person started from a button. Use Button.

6 rules

Must: Write the live label as an -ing verb and its object in sentence case ("Writing partitions"). Because Activity sets it in mono capitals and turns it into the past tense for the summary, which only works from an -ing verb.
Must: Pass the finished summary as a sentence with a full stop, and the outcome as status. Because the summary is prose in the sans, and the end word in its colour carries how it ended.
Should: Show one Activity per run, at its head. Because its pending mark is the one loop on the screen, and two of them make the eye pick.
Never: Cycle invented phrases on a timer to look busy. Because each phrase scrambles in and holds a second, so a fake loop is a moving label that says nothing true.
Never: Paint a warning in yellow; status="warn" shows Warnings in the warning orange. Because yellow is the one action on the screen, and a yellow warning reads as a button.
Must: Pass announce={false} when a parent already announces the end of the run. Because two polite regions read the same summary twice.

4 checks

: A polite status region reads Starting and the finished summary with its end word; live phrases are not read out.
: The scrambled glyphs are aria-hidden and the real phrase is read in their place.
: The pending mark is aria-hidden; the line sets aria-busy while it moves.
: End words: done green 6.5:1, warning orange 6.0:1, failure red 6.5:1 on the light page.

4 edge cases

Burst of steps: Each phrase holds a second; the ones between are skipped.
Run answers at once: Starting never shows, since it waits 150ms first.
Long phrase: Truncates at the line's end; the time never does.
Reduced motion: A new phrase lands at once and the pending mark stands still.

10 props

label: string
active: boolean default false
waiting: boolean default false
elapsed: number
summary: string default the past tense of the last phrase
status: 'ok' | 'warn' | 'fail' | 'stopped' default 'ok'
size: 'default' | 'sm' default 'default'
minDisplay, settle, delay, minLoader: number default 1000, 400, 150, 400
clock: number
announce: boolean default true

17 tokens