shadcn.io is an independent project built on shadcn/ui
Create User is an outline button. The toast says Creating user..., then after 2 seconds John Doe has been added. The name comes from the resolved value.
Use it when the success line should name what came back. A fixed success string cannot do that. If the result should stay on the page, use an Alert. In React, Base UI does not read the resolved name.
Installation
Anatomy
Usage
<>
<Toaster />
<Button onClick={handleShowToast} variant="outline">
Create User
</Button>
</>FAQ
How does the success message get the name?
success is a function, (data) => the string with data.name and "has been added". The promise resolves after 2 seconds with { name: "John Doe" }, so the toast becomes "John Doe has been added".
What shows while the promise is pending?
loading is "Creating user...". That line is on screen until the promise resolves, in the same toast. toast.promise then swaps in the string the success function returns.
What is the error message in this file?
The string "Failed to create user". This button's promise always resolves, so the toast uses the success line. A rejection would show that error string as written.
What should the success function return?
A string. This file reads data.name from the resolved object and returns that sentence. The call also omits description.
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.
