Are you absolutely sure?
This action cannot be undone. This will permanently delete your account from our servers.
---
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---
<AlertDialog>
<AlertDialogTrigger variant="outline">Show Dialog</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account
from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Installation
npx shadcn@latest add @fulldev/alert-dialogUsage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"<AlertDialog>
<AlertDialogTrigger variant="outline">Show Dialog</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>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>AlertDialogTrigger, AlertDialogCancel and AlertDialogAction are Buttons
and take its props, such as variant. AlertDialogCancel closes the dialog.
AlertDialogAction does not: run the action, then close the dialog with the
alert-dialog:set event.
<AlertDialog id="account-deletion-dialog">
<AlertDialogTrigger>Delete account</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogTitle>Delete this account?</AlertDialogTitle>
<AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
<AlertDialogAction id="confirm-account-deletion">
Delete account
</AlertDialogAction>
</AlertDialogContent>
</AlertDialog>
<script>
const dialog = document.getElementById("account-deletion-dialog")
const action = document.getElementById("confirm-account-deletion")
action?.addEventListener("click", () => {
// Run the confirmed action here, then close after it succeeds.
dialog?.dispatchEvent(
new CustomEvent("alert-dialog:set", {
detail: { open: false },
})
)
})
</script>Composition
AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
├── AlertDialogHeader
│ ├── AlertDialogMedia
│ ├── AlertDialogTitle
│ └── AlertDialogDescription
└── AlertDialogFooter
├── AlertDialogCancel
└── AlertDialogActionKeep AlertDialogTitle and AlertDialogDescription inside
AlertDialogContent so screen readers announce the dialog context.
Basic
A basic alert dialog with a title, description, and cancel and continue buttons.
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
---
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---
<AlertDialog>
<AlertDialogTrigger variant="outline">Show Dialog</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>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Small
Use the size="sm" prop to make the alert dialog smaller.
Allow accessory to connect?
Do you want to allow the USB accessory to connect to this device?
---
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---
<AlertDialog>
<AlertDialogTrigger variant="outline">Show Dialog</AlertDialogTrigger>
<AlertDialogContent size="sm">
<AlertDialogHeader>
<AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
<AlertDialogDescription>
Do you want to allow the USB accessory to connect to this device?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Don't allow</AlertDialogCancel>
<AlertDialogAction>Allow</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Media
Use the AlertDialogMedia component to add a media element such as an icon or
image to the alert dialog.
Share this project?
Anyone with the link will be able to view and edit this project.
---
import CircleFadingPlusIcon from "@lucide/astro/icons/circle-fading-plus"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---
<AlertDialog>
<AlertDialogTrigger variant="outline">Share Project</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogMedia>
<CircleFadingPlusIcon />
</AlertDialogMedia>
<AlertDialogTitle>Share this project?</AlertDialogTitle>
<AlertDialogDescription>
Anyone with the link will be able to view and edit this project.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Share</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Small with Media
Use size="sm" and AlertDialogMedia together.
Allow accessory to connect?
Do you want to allow the USB accessory to connect to this device?
---
import BluetoothIcon from "@lucide/astro/icons/bluetooth"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---
<AlertDialog>
<AlertDialogTrigger variant="outline">Show Dialog</AlertDialogTrigger>
<AlertDialogContent size="sm">
<AlertDialogHeader>
<AlertDialogMedia>
<BluetoothIcon />
</AlertDialogMedia>
<AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
<AlertDialogDescription>
Do you want to allow the USB accessory to connect to this device?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Don't allow</AlertDialogCancel>
<AlertDialogAction>Allow</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Destructive
Pass variant="destructive" to AlertDialogAction for a destructive action.
Delete chat?
This will permanently delete this chat conversation. View Settings delete any memories saved during this chat.
---
import Trash2Icon from "@lucide/astro/icons/trash"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
---
<AlertDialog>
<AlertDialogTrigger variant="destructive">Delete Chat</AlertDialogTrigger>
<AlertDialogContent size="sm">
<AlertDialogHeader>
<AlertDialogMedia class="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
<Trash2Icon />
</AlertDialogMedia>
<AlertDialogTitle>Delete chat?</AlertDialogTitle>
<AlertDialogDescription>
This will permanently delete this chat conversation. View
<a href="#">Settings</a> delete any memories saved during this chat.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel variant="outline">Cancel</AlertDialogCancel>
<AlertDialogAction variant="destructive">Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>RTL
Pass dir="rtl" on AlertDialogContent as well: the content is portaled to
document.body.
هل أنت متأكد تمامًا؟
لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من خوادمنا.
السماح للملحق بالاتصال؟
هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟
---
import BluetoothIcon from "@lucide/astro/icons/bluetooth"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
const translations = {
en: {
dir: "ltr",
values: {
showDialog: "Show Dialog",
showDialogSm: "Show Dialog (sm)",
title: "Are you absolutely sure?",
description:
"This action cannot be undone. This will permanently delete your account from our servers.",
cancel: "Cancel",
continue: "Continue",
smallTitle: "Allow accessory to connect?",
smallDescription:
"Do you want to allow the USB accessory to connect to this device?",
dontAllow: "Don't allow",
allow: "Allow",
},
},
ar: {
dir: "rtl",
values: {
showDialog: "إظهار الحوار",
showDialogSm: "إظهار الحوار (صغير)",
title: "هل أنت متأكد تمامًا؟",
description:
"لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من خوادمنا.",
cancel: "إلغاء",
continue: "متابعة",
smallTitle: "السماح للملحق بالاتصال؟",
smallDescription: "هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟",
dontAllow: "عدم السماح",
allow: "السماح",
},
},
he: {
dir: "rtl",
values: {
showDialog: "הצג דיאלוג",
showDialogSm: "הצג דיאלוג (קטן)",
title: "האם אתה בטוח לחלוטין?",
description:
"פעולה זו לא ניתנת לביטול. זה ימחק לצמיתות את החשבון שלך מהשרתים שלנו.",
cancel: "ביטול",
continue: "המשך",
smallTitle: "לאפשר להתקן להתחבר?",
smallDescription: "האם אתה רוצה לאפשר להתקן USB להתחבר למכשיר זה?",
dontAllow: "אל תאפשר",
allow: "אפשר",
},
},
} as const
const language = "ar"
const { dir, values: t } = translations[language]
---
<div class="flex gap-4" dir={dir}>
<AlertDialog>
<AlertDialogTrigger variant="outline">{t.showDialog}</AlertDialogTrigger>
<AlertDialogContent dir={dir} data-lang={language}>
<AlertDialogHeader>
<AlertDialogTitle>{t.title}</AlertDialogTitle>
<AlertDialogDescription>{t.description}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t.cancel}</AlertDialogCancel>
<AlertDialogAction>{t.continue}</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<AlertDialog>
<AlertDialogTrigger variant="outline">{t.showDialogSm}</AlertDialogTrigger>
<AlertDialogContent size="sm" dir={dir} data-lang={language}>
<AlertDialogHeader>
<AlertDialogMedia>
<BluetoothIcon />
</AlertDialogMedia>
<AlertDialogTitle>{t.smallTitle}</AlertDialogTitle>
<AlertDialogDescription>{t.smallDescription}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t.dontAllow}</AlertDialogCancel>
<AlertDialogAction>{t.allow}</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>API Reference
Source: src/components/ui/alert-dialog
Interactivity comes from @data-slot/alert-dialog.
AlertDialog
| Prop | Type | Default |
|---|---|---|
defaultOpen | boolean | false |
closeOnClickOutside | boolean | false |
closeOnEscape | boolean | true |
lockScroll | boolean | true |
| Event | Detail | Description |
|---|---|---|
alert-dialog:change | { open: boolean } | Fired when the open state changes. |
alert-dialog:set | { open: boolean } | Dispatch to set the open state. |
AlertDialogContent
| Prop | Type | Default |
|---|---|---|
size | "default" | "sm" | "default" |