components

Toast (Sonner)

A toast is an acknowledgement — the system saying 'got it, here's what happened'. Anything the user must act on goes in a dialog or an inline banner, not a toast.

Read the full spec

Variants

Six everyday variants. Pick by what happened — success, error, warning, info — not by colour preference.

tsx

import { toast } from "@wolf/design-system";

toast("Area updated");
toast.success("Report submitted", { description: "We've notified your area." });
toast.error("Couldn't save", { description: "Check your connection and retry." });
toast.warning("Area approaching cap", { description: "3 of 5 slots used." });
toast.info("Escalation window paused");

Promise

`toast.promise` tracks a Promise — shows a loading toast while it's pending, then success or error on resolve/reject. Great for save/submit flows.

tsx

toast.promise(saveReport(), {
  loading: "Saving report…",
  success: "Report saved",
  error: "Couldn't save report",
});

With action

Attach a single action — typically Undo or Retry. Keep it to one affordance; anything more belongs in a banner or dialog.

tsx

toast.success("Report archived", {
  action: { label: "Undo", onClick: () => restore(id) },
});