Toast

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/toast

UsageCopy Anchor Link

Wrap the app once and place the Toaster where toasts should appear:

<ToastProvider>
  <App />
  <Toaster />
</ToastProvider>

Then call toast from anywhere, including outside components, like a data layer or an event handler:

toast.success("Invoice sent", { description: "Northwind Traders gets it in a minute." });

TypesCopy Anchor Link

toast() for a plain message, and toast.success, .error, .info and .loading for an icon with timing to match. For measurable work there is toast.progress, below. Most close after 5 seconds. Errors stay for 8 seconds and are announced straight away to screen readers, because an error that disappears unread is worse than one that waits. Loading toasts stay until you update them with toast.update(id, title, { type }).

PromisesCopy Anchor Link

toast.promise shows a loading toast and turns it into success or error when the promise settles. The messages can use the result.

toast.promise(exportInvoices(), {
  loading: "Exporting invoices",
  success: (count) => `Exported ${count} invoices`,
  error: "Export failed",
});

ProgressCopy Anchor Link

toast.progress is for work you can measure, like an upload or an import. It shows a bar and a small line under the title: the percentage by default, or your own detail for steps. It returns a handle to move it along and finish it; finishing drops the bar and the action and starts the normal timer.

const upload = toast.progress("Uploading receipts", {
  detail: "0 of 12",
  action: { label: "Cancel", onClick: cancelUpload },
});

upload.update(5 / 12, "5 of 12");
upload.success("Uploaded 12 receipts");

value runs from 0 to 1. The bar eases between updates, so progress that arrives in bursts still moves smoothly. When you cannot measure the work, use toast.loading instead: a bar that guesses is worse than a spinner that is honest.

UndoCopy Anchor Link

Pass an action for one inline button. Clicking it runs onClick and closes the toast. Keep it to quick reversals, like Undo after archiving; anything bigger belongs in the page.

toast("Invoice archived", {
  action: { label: "Undo", onClick: () => restore(invoice) },
});

The stackCopy Anchor Link

New toasts slide in at the front. Older ones tuck behind as a deck, a little higher and smaller, with their text hidden so the stack stays calm. Hover or focus the stack and it fans out into a full list; timers pause while you read, and when the window is in the background. Past limit (3 by default, on ToastProvider) the oldest ones fade out.

DismissingCopy Anchor Link

Swipe a toast right or down and it follows your finger, fading as it goes, then carries on in that direction. On a desktop, the close button appears on hover; on touch screens it is always there.

PositionCopy Anchor Link

position on Toaster: bottom-right (default), bottom-left, bottom-center, top-right, top-left or top-center. Top positions stack downward with the same deck.

AccessibilityCopy Anchor Link

Toasts are read politely as they arrive. Errors, and anything with priority: "high", are read straight away. Each toast is named by its title and description, and a progress toast is a progress bar that reads its detail, like "5 of 12".

MotionCopy Anchor Link

Toasts slide in from their edge in 220ms, and the icon stamps in just after, so the result lands as its own moment. A loading toast that resolves stamps its new icon the same way. The deck fans out and back on the same curve.

Closing takes 160ms rather than the library's usual 110ms exit: the toast sinks back and shrinks a little, like it is put away, because a toast is usually closed while you are looking at it and anything faster reads as a blink. While you swipe, the toast fades with distance; once it is past the point where letting go dismisses it, it is at about half strength. Let go before that and it springs back.

Under reduced motion they only fade; the stack still lays out the same, it just does not move between states.

API referenceCopy Anchor Link