shadcn.io is not affiliated with official shadcn/ui
Alert examples · Standard
Standard with Title and Action Alert for React
A neutral alert with a title and View Details and Dismiss buttons.
A standard alert with actions invites a next step without urgency. This React alert puts View Details and Dismiss buttons in AlertAction, at the end of a plain Alert with a single AlertTitle, in the default style with no color tint. Use it for general notices with an optional follow-up, such as a completed job the reader may want to inspect.
Preview
Installation
FAQ
What does this standard alert contain?
An AlertTitle of Success, plus View Details and Dismiss in AlertAction. There is no variant, so the alert uses the default card background and border.
Which button variants does the demo use?
View Details is the default Button and Dismiss is variant="outline". Both are size="xs", in one AlertAction with className="flex gap-2".
Where do the buttons sit?
AlertAction is absolutely positioned at the top right. The alert adds right padding so the title keeps its room. The two buttons stay in one row.
Do the buttons do anything in this file?
No. Neither button has a click handler or an href. Alert also has no built-in dismiss, so Dismiss hides the alert only if your state stops rendering it.
Related
- Standard with Title AlertA neutral alert with only a title, for a
- Standard with Title and Description AlertA neutral alert with a title and a
- Info with Title and Action AlertAn info alert with a title and Learn More
- Success with Title and Action AlertA success alert with a title and View
- Error with Title and Action AlertA destructive alert with a title and
- Standard with Everything AlertA neutral alert with a check icon, a