shadcn.io is not affiliated with official shadcn/ui
Alert examples · Standard
Standard with Title, Description and Action Alert for React
A neutral alert with a title, a description, and View Details and Dismiss buttons.
When a general notice needs both context and a next step, combine them without a color. This React alert is a plain Alert with an AlertTitle, an AlertDescription, and View Details and Dismiss in AlertAction. Use it for updates that need a sentence of explanation and an optional follow-up, where a colored variant would overstate them.
Preview
Installation
FAQ
When should I use fully-featured standard alerts?
When a neutral message needs an explanation and the reader may act on it: a finished export with a link to the file, a change with a link to the details. Drop the parts you don't need.
How do I create hierarchy without color theming?
With weight and order. AlertTitle is heavier than the muted AlertDescription, and the default button is filled while Dismiss is outlined, so the reader's eye goes to the title, then the main action.
Should buttons stack or stay inline with content?
Inline, at the end of the title row in AlertAction, as here. The description wraps underneath, so the buttons don't steal its width. If the labels get long, move them below the description.
How long should descriptions be in fully-featured alerts?
A sentence or two. With a title and two buttons the alert is already busy; more text belongs on the page View Details opens.
When should I use alerts vs dialogs for important messages?
Use an alert when the reader can keep working and act later. Use a dialog, or an Alert Dialog for confirmations, when they must decide before going on. An alert never blocks the page.
Related
- Standard with Title and Description AlertA neutral alert with a title and a
- Standard with Title and Action AlertA neutral alert with a title and View
- Standard with Everything AlertA neutral alert with a check icon, a
- Info with Title, Description and Action AlertAn info alert with a title, a
- Success with Title, Description and Action AlertA success alert with a title, a
- Standard with Title AlertA neutral alert with only a title, for a