ComponentsFeedback
Alert
A callout for important, contextual messages.
Overview
An alert draws attention to a short, important message. Compose it from
AlertTitle and AlertDescription, optionally with a leading icon.
Heads up!
You can add components to your app using the CLI.
$ npx morpha-ui add alertExamples
With icon
Installation complete
Run the dev server to see your changes live.
Destructive
Unable to process payment
Your card was declined. Please try a different payment method.
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add alert. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add alertAPI Reference
The Alert root takes a variant prop. The parts AlertTitle,
AlertDescription, and AlertAction forward <div> attributes.
Prop
Type
Accessibility
- The root renders
role="alert", so the message is announced when it appears. - Provide both a textual title and description; don't rely on the icon or color alone.
- Reserve the
destructivevariant for genuine errors or destructive consequences.