Action receipt | Glaze design system

Result

Refunded $48.00 on order 4812
Done
Support agent, 2 minutes ago, Oct 17, 2026, 2:02:00 PM UTC
donedefault
Refunded order 4812
Done
Done: Refunded $48.00ord_4812
Done: Emailed the customerana@acme.example
Support agent, 2 minutes ago, Oct 17, 2026, 2:02:00 PM UTC
steps
Refunded order 4812
Partly done
Done: Refunded $48.00ord_4812
Failed: Email not sentAddress bounced
Support agent, 2 minutes ago, Oct 17, 2026, 2:02:00 PM UTC
partial
Refund on order 4812 failed
Failed
Failed: Card declined the refundcard_declined
Support agent, 2 minutes ago, Oct 17, 2026, 2:02:00 PM UTC
failed

Refunded $48.00 on order 4812
Done
Support agent, 2 minutes ago, Oct 17, 2026, 2:02:00 PM UTC
undo open
Refunded $48.00 on order 4812
Done
Support agent, 2 minutes ago, Oct 17, 2026, 2:02:00 PM UTC
undoing
Refunded $48.00 on order 4812
Undone
Undone
Support agent, 2 minutes ago, Oct 17, 2026, 2:02:00 PM UTC
undone
Refunded $48.00 on order 4812
Done
Support agent, 18 minutes ago, Oct 17, 2026, 2:02:00 PM UTC
window passed

When to use it

Use: An agent finished an action that changed something outside the thread: a refund, an email sent, a deploy.
Use: Several changes from one request that should read as one record (steps).
Use: An action that can be reversed for a while.
Not for: A step while the agent is still working. Use Tool call.
Not for: Asking before the action runs. Use Tool call.
Not for: An answer that changed nothing. Use Message.
Not for: A short note that something saved. Use Toast.

7 rules

Must: Write title and each step label in the past tense with the object and amount. Because the receipt is the record after the fact, and "Refunding" claims nothing happened.
Must: Pass onUndo with undoUntil set to the last moment the undo works; never leave Undo up past it. Because Undo leaves on its own at undoUntil, and an Undo that fails after the window breaks the one promise the receipt makes.
Must: Set undoing while the undo runs and undone when it lands. Because undoing holds Undo pending so it cannot run twice, and undone swaps the result for Undone and greys the steps.
Must: Set result="partial" and mark the failed steps with failed and the reason in detail; keep the steps that worked. Because dropping the steps that worked hides changes that did happen, and only detail says why one failed.
Should: Put an ID in a step's detail inside <code>, so it takes mono at 0.8.
Never: Make Undo a glass button or add a second action beside it. Because reversing is not the next step the receipt leads to, and the footer holds meta and at most one quiet action.
Never: Wrap the receipt in another Card or panel. Because it is a card already, and a card in a card is a box in a box.

4 states, highest first

4 checks

: role="group" named by the title.
: The result is a word, never colour alone; each step reads its own word (Done, Failed, Undone) before the label.
: A polite status region says Undone when the undo lands.
: Undo keeps focus while pending and announces busy.

2 keys

6 edge cases

Window passes while open: Undo leaves at that moment; the meta stays.
Undo running at the deadline: Undo stays pending until undone or the call settles.
Failed result: No Undo: nothing changed.
Long title: Wraps; the result word keeps the first line.
Long step: The label truncates, the detail truncates first.
No time and no Undo: No footer; the card is the panel alone.

8 props

title: ReactNode
steps: {label, detail?, failed?}[]
result: 'done' | 'partial' | 'failed' default 'done'
at, now: Date | string | number
by: ReactNode
onUndo, undoUntil: () => void, Date | string | number
undoing, undone: boolean default false
labels: {done?, partial?, failed?, undone?, undo?, undoing?} default English words

16 tokens