Household pattern
WorkingIndicator
The helper is doing something. A breathing dot and a sentence, never a spinner.
States
Working (cycling steps)
Checking what's running low
Waiting on you
Waiting for your answer on the detergentUntil Thursday 7:00 am
Done
Wednesday's order is inDelivery 7–9 pm
Idle
Nothing to do until Sunday
Error
Couldn't reach Greenleaf MarketWill try again at 8:00 am. Nothing has been ordered.
Small
Checking the pantry list
When to use
- Wherever the helper is mid-task, with steps that say what it is doing.
- For idle, done, waiting and the one error state.
When not to
- For page loading. Use a skeleton.
- For progress with a known end. Use a count in text.
Props
| Name | Type | Notes |
|---|---|---|
| state* | "working" | "waiting" | "done" | "idle" | "error" | |
| label* | string | A sentence in the helper's voice: "Checking Greenleaf's stock". |
| steps | string[] | While working, these rotate every two seconds. |
| detail | string | Second line: "Will try again at 8 am." |
* required
Accessibility invariants
- role=status with aria-live polite, so changes are announced without interrupting.
- The breathing dot stops under reduced motion; the text carries the meaning.
- Error uses the refused tone, a warning glyph, and says what happens next.
Agent instructions
For anything generating UI from this system
Use WorkingIndicator instead of any spinner or progress bar. Write label and steps as short sentences a person would say about a chore. Always give the error state a detail line saying what happens next. Use state="waiting" only when the helper is waiting on the user.