shadcn.io is not affiliated with official shadcn/ui
Alert examples · Error
Error with Title and Action Alert for React
A destructive alert with a title and Retry and Dismiss buttons.
Errors need a way out. This React alert puts a Retry and a Dismiss button in AlertAction, at the end of a destructive Alert with a single AlertTitle, so the reader can recover without hunting for a control. Use it for temporary failures, such as a network error, where trying again is likely to work.
Preview
Installation
FAQ
What is in this alert besides the title?
Retry and Dismiss, inside one AlertAction. The alert is variant="destructive" with a single AlertTitle and no description.
Which Button variants does the demo use?
Retry uses the destructive Button variant, so it matches the alert's color, and Dismiss uses outline, so it reads as the lesser choice. Both are size="xs", the size that fits beside the title in AlertAction.
Where do the buttons sit?
AlertAction is absolutely positioned at the top right, and the alert adds right padding so the title keeps its room. Both buttons go in that one slot, with className="flex gap-2".
What size should error alert action buttons be?
Small: the demo uses size="xs", which keeps the buttons the height of the title line so the alert stays compact. Larger buttons push the alert taller and compete with the message.
Related
- Error with Title AlertA destructive alert with only a title
- Error with Title, Description and Action AlertA destructive alert with a title, a
- Error with Title and Description AlertA destructive alert with a title and a
- Warning with Title and Action AlertA warning alert with a title and Proceed
- Info with Title and Action AlertAn info alert with a title and Learn More
- Error with Everything AlertA destructive alert with an error icon, a