shadcn.io is not affiliated with official shadcn/ui
Alert examples · Success
Success with Title and Description Alert for React
A success alert with a title and a one-sentence description.
Success gets clearer with a detail. This React alert pairs an AlertTitle with an AlertDescription in an Alert with variant="success", so the title confirms what worked and the sentence says what it means. Use it for confirmations that benefit from context, such as changes that are now live or an upload that is being processed.
Preview
Installation
FAQ
What does this success alert contain?
AlertTitle with the text Success, and AlertDescription with "Your changes have been saved successfully." The root is variant="success" and className="max-w-lg".
Is there an icon or a button?
No. Add an svg before AlertTitle for the icon column, or an AlertAction when the reader should open the result or dismiss the alert.
Why isn't the description green?
The success variant tints the alert's background and border and colors the icon, but keeps the text in the theme's foreground and muted colors. Green body text is harder to read, and the tint already says it's good news.
How do the title and description line up?
Alert is a grid with a small gap. AlertTitle is font-medium and AlertDescription follows it, wrapping inside max-w-lg.
Should success alerts with descriptions auto-hide?
An Alert never hides itself; it stays until your code removes it. If the confirmation should vanish after a few seconds, use a toast such as Sonner instead.
Related
- Success with Title AlertA success alert with only a title, for a
- Success with Title and Action AlertA success alert with a title and View
- Error with Title and Description AlertA destructive alert with a title and a
- Info with Title and Description AlertAn info alert with a title and a
- Warning with Title and Description AlertA warning alert with a title and a
- Success with Title, Description and Action AlertA success alert with a title, a