Promise Toast with Error Sonner for React

error is a function, (error: Error) => a string that reads error.message. The promise rejects after 2 seconds with new Error("Network error"), so the toast becomes Error: Network error.

loading is "Saving changes...". That stays on the same toast until the promise rejects. The error function's string then replaces it.

success is "Changes saved successfully", and this button's promise always calls reject. A resolve would show that string as written.

The rejection from the promise. This demo rejects with an Error, then reads message. The function returns a string, which is the toast title.

This call does not pass duration. After the swap off the loading type, the toast uses duration on Toaster, or 4 seconds when that is omitted.

Toaster's icons.loading, a Loader2Icon with animate-spin. The demo renders its own Toaster beside the button; in an app, render one near the root.