Alert Dialog

"use client";
import {	AlertDialog,	AlertDialogAction,	AlertDialogCancel,	AlertDialogContent,	AlertDialogDescription,	AlertDialogFooter,	AlertDialogHeader,	AlertDialogTitle,	AlertDialogTrigger,} from "@/components/ui/alert-dialog";import { Button } from "@/components/ui/button";
export function AlertDialogDemo() {	return (		<AlertDialog>			<AlertDialogTrigger render={<Button variant="secondary" />}>				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

pnpm dlx shadcn@latest add @herocn/alert-dialog

Usage

import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogTrigger,} from "@/components/ui/alert-dialog"

<AlertDialog>  <AlertDialogTrigger render={<Button 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>

Composition

Use the following composition to build an AlertDialog:

AlertDialog├── AlertDialogTrigger└── AlertDialogContent    ├── AlertDialogHeader    │   ├── AlertDialogMedia    │   ├── AlertDialogTitle    │   └── AlertDialogDescription    └── AlertDialogFooter        ├── AlertDialogCancel        └── AlertDialogAction

Examples

Basic

A basic alert dialog with a title, description, and cancel and continue buttons.

"use client";
import {	AlertDialog,	AlertDialogAction,	AlertDialogCancel,	AlertDialogContent,	AlertDialogDescription,	AlertDialogFooter,	AlertDialogHeader,	AlertDialogTitle,	AlertDialogTrigger,} from "@/components/ui/alert-dialog";import { Button } from "@/components/ui/button";
export function AlertDialogBasic() {	return (		<AlertDialog>			<AlertDialogTrigger				render={<Button variant="secondary">Show Dialog</Button>}			/>			<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>	);}

Overlay variant

Use overlayVariant on AlertDialogContent to choose an opaque dim (opaque), a blurred backdrop (blur), or transparent overlay (transparent).

"use client";
import {	AlertDialog,	AlertDialogCancel,	AlertDialogContent,	AlertDialogDescription,	AlertDialogFooter,	AlertDialogHeader,	AlertDialogTitle,	AlertDialogTrigger,} from "@/components/ui/alert-dialog";import { Button } from "@/components/ui/button";
const variants = [	{		variant: "opaque",		label: "Opaque",		title: "Opaque overlay",		description:			"Default dimmed backdrop without extra blur on the page behind the AlertDialog.",	},	{		variant: "blur",		label: "Blur",		title: "Blurred overlay",		description:			"Backdrop blur so content behind the AlertDialog is visibly softened.",	},	{		variant: "transparent",		label: "Transparent",		title: "Transparent overlay",		description:			"No dimmed backdrop \u2014 the page stays fully visible behind the AlertDialog surface.",	},] as const;
export function AlertDialogOverlayVariant() {	return (		<div className="flex flex-wrap gap-2">			{variants.map((v) => (				<AlertDialog key={v.variant}>					<AlertDialogTrigger render={<Button variant="secondary" />}>						{v.label}					</AlertDialogTrigger>					<AlertDialogContent overlayVariant={v.variant}>						<AlertDialogHeader>							<AlertDialogTitle>{v.title}</AlertDialogTitle>							<AlertDialogDescription>{v.description}</AlertDialogDescription>						</AlertDialogHeader>						<AlertDialogFooter>							<AlertDialogCancel className="w-full">Cancel</AlertDialogCancel>						</AlertDialogFooter>					</AlertDialogContent>				</AlertDialog>			))}		</div>	);}

Small

Use the size="sm" prop to make the alert dialog smaller.

"use client";
import {	AlertDialog,	AlertDialogAction,	AlertDialogCancel,	AlertDialogContent,	AlertDialogDescription,	AlertDialogFooter,	AlertDialogHeader,	AlertDialogTitle,	AlertDialogTrigger,} from "@/components/ui/alert-dialog";import { Button } from "@/components/ui/button";
export function AlertDialogSmall() {	return (		<AlertDialog>			<AlertDialogTrigger				render={<Button variant="secondary">Show Dialog</Button>}			/>			<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&apos;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.

"use client";
import { CircleFadingPlusIcon } from "lucide-react";import {	AlertDialog,	AlertDialogAction,	AlertDialogCancel,	AlertDialogContent,	AlertDialogDescription,	AlertDialogFooter,	AlertDialogHeader,	AlertDialogMedia,	AlertDialogTitle,	AlertDialogTrigger,} from "@/components/ui/alert-dialog";import { Button } from "@/components/ui/button";
export function AlertDialogWithMedia() {	return (		<AlertDialog>			<AlertDialogTrigger				render={<Button variant="secondary">Share Project</Button>}			/>			<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 the size="sm" prop to make the alert dialog smaller and the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.

"use client";
import { BluetoothIcon } from "lucide-react";import {	AlertDialog,	AlertDialogAction,	AlertDialogCancel,	AlertDialogContent,	AlertDialogDescription,	AlertDialogFooter,	AlertDialogHeader,	AlertDialogMedia,	AlertDialogTitle,	AlertDialogTrigger,} from "@/components/ui/alert-dialog";import { Button } from "@/components/ui/button";
export function AlertDialogSmallWithMedia() {	return (		<AlertDialog>			<AlertDialogTrigger				render={<Button variant="secondary">Show Dialog</Button>}			/>			<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&apos;t allow</AlertDialogCancel>					<AlertDialogAction>Allow</AlertDialogAction>				</AlertDialogFooter>			</AlertDialogContent>		</AlertDialog>	);}

Destructive

Use the AlertDialogAction component to add a destructive action button to the alert dialog.

"use client";
import { Trash2Icon } from "lucide-react";import {	AlertDialog,	AlertDialogAction,	AlertDialogCancel,	AlertDialogContent,	AlertDialogDescription,	AlertDialogFooter,	AlertDialogHeader,	AlertDialogMedia,	AlertDialogTitle,	AlertDialogTrigger,} from "@/components/ui/alert-dialog";import { Button } from "@/components/ui/button";
export function AlertDialogDestructive() {	return (		<AlertDialog>			<AlertDialogTrigger				render={<Button variant="destructive">Delete Chat</Button>}			/>			<AlertDialogContent size="sm">				<AlertDialogHeader>					<AlertDialogMedia className="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> to delete any memories saved during this						chat.					</AlertDialogDescription>				</AlertDialogHeader>				<AlertDialogFooter>					<AlertDialogCancel variant="secondary">Cancel</AlertDialogCancel>					<AlertDialogAction variant="destructive">Delete</AlertDialogAction>				</AlertDialogFooter>			</AlertDialogContent>		</AlertDialog>	);}

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client";
import { BluetoothIcon } from "lucide-react";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import {	AlertDialog,	AlertDialogAction,	AlertDialogCancel,	AlertDialogContent,	AlertDialogDescription,	AlertDialogFooter,	AlertDialogHeader,	AlertDialogMedia,	AlertDialogTitle,	AlertDialogTrigger,} from "@/components/ui/alert-dialog";import { Button } from "@/components/ui/button";
const translations: 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: "אפשר",		},	},};
export function AlertDialogRtl() {	const { dir, language, t } = useTranslation(translations, "ar");
	return (		<div className="flex gap-4" lang={language} dir={dir}>			<AlertDialog>				<AlertDialogTrigger render={<Button variant="secondary" />}>					{t.showDialog}				</AlertDialogTrigger>				<AlertDialogContent					dir={dir}					data-lang={dir === "rtl" ? language : undefined}				>					<AlertDialogHeader>						<AlertDialogTitle>{t.title}</AlertDialogTitle>						<AlertDialogDescription>{t.description}</AlertDialogDescription>					</AlertDialogHeader>					<AlertDialogFooter>						<AlertDialogCancel>{t.cancel}</AlertDialogCancel>						<AlertDialogAction>{t.continue}</AlertDialogAction>					</AlertDialogFooter>				</AlertDialogContent>			</AlertDialog>			<AlertDialog>				<AlertDialogTrigger render={<Button variant="secondary" />}>					{t.showDialogSm}				</AlertDialogTrigger>				<AlertDialogContent					size="sm"					dir={dir}					data-lang={dir === "rtl" ? language : undefined}				>					<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

AlertDialogContent

Prop	Type	Default
size	`"default" \| "sm"`	`"default"`
overlayVariant	`"opaque" \| "blur" \| "transparent"`	`"opaque"`

For more information about other components and their props, see the Base UI documentation.