shadcn.io is not affiliated with official shadcn/ui
Alert examples · Success
Success with Title, Description and Action Alert for React
A success alert with a title, a description, and View Details and Dismiss buttons.
When a success deserves context and a next step, combine them. This React alert stacks an AlertTitle and an AlertDescription in an Alert with variant="success" and adds View Details and Dismiss in AlertAction. Use it for important confirmations, such as a published change or a processed payment, where the reader may want to see the result.
Preview
Installation
FAQ
Which parts does this success alert include?
AlertTitle, AlertDescription, and View Details plus Dismiss in AlertAction. The root is variant="success" with className="max-w-lg". There is no icon.
How do I create hierarchy in success alerts?
The parts already do it: the title is heavier than the muted description, and the filled View Details button stands out from the outlined Dismiss. The green tint frames the whole alert without competing with either.
What does the description say?
"Your changes have been saved successfully." That string is the AlertDescription. The title is the word Success.
How are the buttons placed?
Both are size="xs" in one AlertAction with className="flex gap-2". That slot is absolutely positioned at the top right, and the alert pads the right side so the title keeps its room. The description wraps in the grid under the title.
Do View Details and Dismiss do anything here?
No. Neither button has a click handler. Alert has no built-in dismiss, so hiding it is your state.
When should I use success alerts vs success toasts?
Use an alert when the confirmation should stay on the page, especially with a follow-up action. Use a toast, such as Sonner, for a quick confirmation that should disappear on its own.
Related
- Success with Title and Description AlertA success alert with a title and a
- Success with Title and Action AlertA success alert with a title and View
- Success with Everything AlertA success alert with a check icon, a
- Error with Title, Description and Action AlertA destructive alert with a title, a
- Info with Title, Description and Action AlertAn info alert with a title, a
- Success with Title AlertA success alert with only a title, for a