Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Preview
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/AlertDialog";
import { Button } from "@/components/ui/Button";
export function AlertDialogDemo() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Show Dialog</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel asChild>
<Button variant="outline">Cancel</Button>
</AlertDialogCancel>
<AlertDialogAction asChild>
<Button>Continue</Button>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/alert-dialogProps
AlertDialog
| Prop | Type | Default |
|---|---|---|
| All props from | AlertDialogRadix.Root | - |
AlertDialogPortal
| Prop | Type | Default |
|---|---|---|
| All props from | AlertDialogRadix.Portal | - |
AlertDialogOverlay
| Prop | Type | Default |
|---|---|---|
| All props from | AlertDialogRadix.Overlay | - |
AlertDialogTrigger
| Prop | Type | Default |
|---|---|---|
| All props from | AlertDialogRadix.Trigger | - |
AlertDialogContent
| Prop | Type | Default |
|---|---|---|
| All props from | AlertDialogRadix.Content | - |
AlertDialogHeader
| Prop | Type | Default |
|---|---|---|
| All props from | "div" | - |
AlertDialogFooter
| Prop | Type | Default |
|---|---|---|
| All props from | "div" | - |
AlertDialogTitle
| Prop | Type | Default |
|---|---|---|
| All props from | AlertDialogRadix.Title | - |
AlertDialogDescription
| Prop | Type | Default |
|---|---|---|
| All props from | AlertDialogRadix.Description | - |
AlertDialogAction
| Prop | Type | Default |
|---|---|---|
| All props from | AlertDialogRadix.Action | - |
AlertDialogCancel
| Prop | Type | Default |
|---|---|---|
| All props from | AlertDialogRadix.Cancel | - |