shadcn.io is not affiliated with official shadcn/ui
Alert examples · Warning
Warning with Everything Alert for React
A warning alert with a warning icon, a title, a description, and Proceed and Cancel buttons.
This is the full warning alert: a TriangleAlertIcon from Lucide, a title, a description of the risk, and Proceed and Cancel buttons in an Alert with variant="warning". The icon goes first and the alert gives it its own column in the warning color. Use it for consequential actions, such as an operation that can't be undone, where the reader needs to notice, understand and decide.
Preview
Installation
FAQ
What is in this warning alert?
TriangleAlertIcon first, then AlertTitle, AlertDescription, and Proceed plus Cancel in AlertAction. The root is variant="warning" with className="max-w-lg".
What color is the TriangleAlert icon?
The theme's --warning color, set by variant="warning" on the alert. You don't add color or size classes to the icon; the alert handles both, and the text keeps its regular colors.
How does the icon line up with the title?
Put it first, before AlertTitle: the alert places a direct svg child in its own column spanning the title and description, and aligns it with the title's first line.
Why is the icon aria-hidden?
The title already says Warning, so the icon is decorative. The demo sets aria-hidden="true" on TriangleAlertIcon.
Related
- Warning with Title, Description and Action AlertA warning alert with a title, a
- Warning with Title AlertA warning alert with only a title, for a
- Error with Everything AlertA destructive alert with an error icon, a
- Info with Everything AlertAn info alert with an info icon, a title
- Success with Everything AlertA success alert with a check icon, a
- Warning with Title and Action AlertA warning alert with a title and Proceed