Playground

Configure the provider, fire real-world scenarios, copy the exact JSX into your app.

Quick fire

Form save (promise tracking)

Manually orchestrate loading → success/error against the same id so every transition routes through addToast and the variant tone plays on each step. (toast.promise() is the one-liner equivalent, but it updates in place and only chimes once.)

toast.loadingtoast.successtoast.error
form-save.tsx
tsx
async function onSave(data) {
  const id = toast.loading("Saving changes…");
  try {
    await saveForm(data);
    // Reusing the same id upserts the toast and plays the success tone.
    toast.success("Saved!", { id });
  } catch (e) {
    toast.error(`Save failed: ${e.message}`, { id });
  }
}

Delete confirm

Inline confirmation toast that resolves with a boolean no separate modal required.

toast.confirm
delete-confirm.tsx
tsx
const ok = await toast.confirm("Delete this file?", {
  confirmLabel: "Delete",
  cancelLabel: "Keep",
});
if (ok) {
  await deleteFile();
  toast.success("File deleted.");
}

Undo (action button)

An inline Undo button gives the user a 5-second grace period before the destructive action commits.

actiononDismiss
undo-action.tsx
tsx
toast.success("Message archived", {
  duration: 5000,
  action: {
    label: "Undo",
    onClick: (dismiss) => {
      restoreMessage();
      dismiss();
    },
  },
});

Batch dismiss (groups)

Tag related toasts with a `group` and dismiss the whole batch in one call perfect for upload queues.

grouptoast.dismissGroup
groups.tsx
tsx
// Three uploads in flight, tagged with the same group
toast.info("Uploading file 1…", { group: "upload" });
toast.info("Uploading file 2…", { group: "upload" });
toast.info("Uploading file 3…", { group: "upload" });

// User cancels: clear the lot
toast.dismissGroup("upload");

Pause when a modal opens

Stop every active timer with pauseAll() so a dialog doesn't dismiss the toast behind it. Resume when the dialog closes.

toast.pauseAlltoast.resumeAll
pause.tsx
tsx
function ModalShell({ open, children }) {
  useEffect(() => {
    if (open) toast.pauseAll();
    else toast.resumeAll();
  }, [open]);
  return open ? <Modal>{children}</Modal> : null;
}

Recent activity (history)

toast.history() returns a snapshot of dismissed toasts. Plug it into a notifications dropdown or debug panel.

toast.history
history.tsx
tsx
const recent = toast.history();
// → [{ id, message, title, variant, dismissedAt, group }]
return (
  <ul>
    {recent.slice(0, 5).map((entry) => (
      <li key={entry.id}>
        [{entry.variant}] {String(entry.message)}
      </li>
    ))}
  </ul>
);
toast-230
Queue is empty.