shadcn.io is not affiliated with official shadcn/ui
Sonner examples · Promise
Basic Promise Toast Sonner for React
A promise toast that shows Loading... and turns into a success message after 2 seconds.
toast.promise ties one toast to an async task: a loading line while it runs, then a success or error line when it settles. Here the promise resolves after 2 seconds, so Loading... becomes Data loaded successfully.
Preview
Installation
FAQ
Which messages does toast.promise get?
The call passes loading as "Loading...", success as "Data loaded successfully", and error as "Failed to load data". All three are strings. The same toast shows the loading line, then replaces it when the promise settles.
What does this promise actually resolve to?
It resolves after 2 seconds with { name: "User data" }. success is a plain string, so the toast shows "Data loaded successfully". Pass a function as success when the message should use the resolved value.
When does the error string show?
When the promise rejects. This button's promise always calls resolve, so the error line stays unused. The error string is still there for a rejection.
Does the call return anything?
Yes. toast.promise returns an id, and that id has unwrap(), which settles with the same value as the promise. This button ignores the return value.
Related
- Promise Toast with Data SonnerA promise toast whose success message
- Promise Toast with Error SonnerA promise toast that fails after 2
- Loading Toast SonnerA loading toast with a spinner that stays
- Toast with Action Button SonnerA toast with an Undo action button that
- Toast with Custom Duration SonnerA toast that stays on screen for 10
- Toast with Custom Icon SonnerA toast with its own check icon in place