shadcn.io is not affiliated with official shadcn/ui
Alert examples · Error
Error with Title and Description Alert for React
A destructive alert with a title and a one-sentence description.
Error occurred isn't helpful on its own: the reader needs to know what broke and what to do next. This React alert pairs an AlertTitle with an AlertDescription inside a destructive Alert, so the title names the failure and the sentence under it explains the way out. Use it for failed requests, processing errors, or any failure that needs a line of context.
Preview
Installation
FAQ
When should I add a description to this error alert?
When the title is only the word Error, as it is here. AlertDescription holds the sentence: "There was a problem processing your request. Please try again."
Which parts does this demo use?
Alert with variant="destructive" and className="max-w-lg", then AlertTitle and AlertDescription. There is no icon and no AlertAction.
How is the description styled in the destructive variant?
The destructive variant colors the description too, a little softer than the title, so the two read as one message with the title on top. You don't add color classes: the variant sets both from the theme's --destructive token.
How do the title and description line up?
Alert is a grid with a small row gap. AlertTitle is the first row and AlertDescription follows it, using the full width inside the padding.
Does a longer description wrap?
Yes. AlertDescription wraps, and max-w-lg caps the alert. This demo is one sentence.
Do screen readers distinguish between title and description?
They read both as part of the alert: Alert has role="alert", so its whole text is announced when it appears, title first. The title and description are plain elements, not headings, so keep the title short and let the description carry the rest.
Related
- Error with Title AlertA destructive alert with only a title
- Error with Title, Description and Action AlertA destructive alert with a title, a
- Warning with Title and Description AlertA warning alert with a title and a
- Error with Title and Action AlertA destructive alert with a title and
- Info with Title and Description AlertAn info alert with a title and a
- Error with Everything AlertA destructive alert with an error icon, a