All Taste components
Feedback
Toast
A short confirmation that appears after an action and goes away by itself.
success · error · with action
Invoice sent
Kaveri Foods will get it by email.
3 invoices archived
// Works with sonner (npm i sonner): mount <Toaster /> once in your layout.
import { toast } from "sonner";
toast.success("Invoice sent", { description: "Kaveri Foods will get it by email." });
toast("3 invoices archived", { action: { label: "Undo", onClick: () => restore() } });
// Taste styling for sonner — add to your Toaster:
// <Toaster toastOptions={{ className: "rounded-lg border border-border bg-bg text-fg shadow-lg" }} />
The code uses the Taste Tailwind preset. Make yours on the Taste page with Export my system.