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.
$ npx morpha-ui add alertHeads up!
You can add components to your app using the CLI.
Examples
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.