Alert
Displays a callout for important, contextual messages.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- Replaced physical pr-18/right-2 with logical pe-18/end-2 for RTL
- Replaced text-left with text-start
Overview
Installation
Usage
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert"
export function Example() {
return (
<Alert>
<Icon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app.
</AlertDescription>
</Alert>
)
}Examples
Destructive
Action
Use AlertAction to place a button in the corner of the alert.