shadcn.io is not affiliated with official shadcn/ui
Alert examples · Warning
Warning with Title and Description Alert for React
A warning alert with a title and a one-sentence description.
Warnings get clearer with context. This React alert pairs an AlertTitle with an AlertDescription in an Alert with variant="warning", so the title names the risk and the sentence says what could happen. Use it for risky actions, quotas or permissions where the reader needs to understand why to be careful.
Preview
Installation
FAQ
What does this warning alert contain?
AlertTitle with the text Warning, and AlertDescription with "This action may have unintended consequences. Please proceed with caution." The root is variant="warning" and className="max-w-lg".
Is there an icon or a button?
No. Put TriangleAlertIcon first if you want the icon column, or Proceed and Cancel in AlertAction if the reader should choose.
Why isn't the description amber?
The warning variant tints the alert's background and border and colors the icon, but keeps the text in the theme's foreground and muted colors. Amber text would be hard to read, and the tint already marks the alert as a warning.
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.
Related
- Warning with Title AlertA warning alert with only a title, for a
- Warning with Title and Action AlertA warning alert with a title and Proceed
- 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
- Success with Title and Description AlertA success alert with a title and a
- Warning with Title, Description and Action AlertA warning alert with a title, a