shadcn.io is an independent project built on shadcn/ui
Show Error is an outline button. The toast says Something went wrong and shows the error icon. There is no second line and no Retry button.
Say what failed and what to do next when you use this for real. This demo is only the short line. A failure people must fix on the page belongs in an Alert. In React, Base UI themes the icon and does not choose the words.
Installation
Anatomy
Usage
<>
<Toaster />
<Button onClick={handleShowToast} variant="outline">
Show Error
</Button>
</>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.
API Reference
Sonner
No extra props in this demo. The rest is on the Sonner page.
Button
Sets onClick={handleShowToast} and variant="outline". The rest is on the Button page.
