shadcn.io is not affiliated with official shadcn/ui
Alert examples · Error
Error with Title Alert for React
A destructive alert with only a title, for a message that needs no explanation.
Sometimes an error needs no essay, just a heads-up. This React alert sets variant="destructive" on Alert and holds a single AlertTitle, so the message reads in the destructive color without a description or an icon. Use it for a quick failure notice where the context is already obvious, such as a save that didn't go through next to the form that sent it.
Preview
Installation
FAQ
When should I use a title-only error alert?
When one line is the whole message. This demo is an Alert with variant="destructive" and a single AlertTitle. Add AlertDescription when the reader still needs the reason or the next step.
Where do the error colors come from?
From variant="destructive": the alert takes the theme's destructive color for its text and icon, so it follows light and dark mode and any theme you install. There are no color classes in the demo; change the --destructive token to restyle every destructive alert at once.
What does the title render as?
AlertTitle is a div with the text Error. It is font-medium and inherits the destructive text color. className="max-w-lg" on Alert caps the width.
Should error alerts be dismissible?
Usually not: an error should stay until its cause is fixed, then go away because your code stops rendering it. The Alert has no built-in close button. If you want one, keep its visibility in your own state and put a button in AlertAction that hides it.
Related
- Error with Title and Description AlertA destructive alert with a title and a
- Warning with Title AlertA warning alert with only a title, for a
- Success with Title AlertA success alert with only a title, for a
- Info with Title AlertAn info alert with only a title, for a
- Error with Everything AlertA destructive alert with an error icon, a
- Error with Title and Action AlertA destructive alert with a title and