Toast
Report beside the thing, not on top of it.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/toast.jsonWhy this exists
Before there was a toast, the swap card reported success by replacing itself with a receipt — which destroyed the very numbers you would want to check the result against. A confirmation needs somewhere to land that is not the thing being confirmed.
Toast or Banner
A Toast is transient and global: it reports that something just happened. A Banner is persistent and page-level: it belongs to the thing it is about and stays until that changes. Reaching for the wrong one is why notices end up either missed or impossible to dismiss.
Undo beats confirmation
Where the work is reversible, give the toast an action with an Undo rather
than putting a confirmation dialog in front of the action. It is faster in the
common case and safer in the rare one.
const toast = useToast();
toast({
title: "Task archived",
action: { label: "Undo", onClick: restore },
});The stack caps at three. Beyond that the oldest is unreadable anyway, and the pile starts covering the thing that produced it.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | The whole message, if that is enough. |
| body | string | — | The detail worth checking — an amount, a name. |
| tone | "default" | "success" | "error" | "default" | Only for genuine success and failure. |
| action | { label, onClick } | — | Usually an Undo. |