shadcn.io is not affiliated with official shadcn/ui
Sonner examples · Standard
Error Toast Sonner for React
A button that shows an error toast with the error icon.
An error toast tells people an action failed. The button calls toast.error, and Toaster adds its error icon. Say what failed and what to do next, since a bare Something went wrong leaves people guessing.
Preview
Installation
FAQ
How does this demo show an error toast?
The button calls toast.error with "Something went wrong". That sets the type to error. Toaster draws an OctagonXIcon with className="size-4" and aria-hidden.
Which options does this call pass?
Only that message. There is no description, duration, action, or custom icon in this file. The whole notice is the string passed to toast.error.
How do I add what failed under the title?
Pass description as the second argument to toast.error. It renders under the title. This demo does not pass one, so the title is the only line.
How do I add a Retry button?
Pass action with a label and an onClick in the second argument. The button runs onClick and then closes the toast. This call does not pass action.
Related
- Default Toast SonnerA button that shows a plain toast with
- Success Toast SonnerA button that shows a success toast with
- Promise Toast with Error SonnerA promise toast that fails after 2
- Toast with Action Button SonnerA toast with an Undo action button that
- Required Field Validation FormA name and an email field marked with
- Info Toast SonnerA button that shows an info toast with