shadcn.io is not affiliated with official shadcn/ui
Shadcn Alert Dialog for React
A modal for critical confirmations and destructive actions.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/radix/alert-dialog.jsonnpx shadcn@latest add https://kit.dev/r/radix/alert-dialog.jsonpnpm dlx shadcn@latest add https://kit.dev/r/radix/alert-dialog.jsonyarn shadcn@latest add https://kit.dev/r/radix/alert-dialog.jsonThis component depends on Button. Install it first if you haven't already.
Install the following dependencies:
bun add radix-ui tailwind-variantsnpm install radix-ui tailwind-variantspnpm add radix-ui tailwind-variantsyarn add radix-ui tailwind-variantsCopy and paste the following code into your project.
"use client";
import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
import type React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/registry/radix/components/button";
export const AlertDialog = (
props: React.ComponentProps<typeof AlertDialogPrimitive.Root>
) => <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
export const AlertDialogTrigger = (
props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>
) => (
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
);
export const AlertDialogPortal = (Update the import paths to match your project setup.
Anatomy
AlertDialogTrigger
AlertDialogOverlay
AlertDialogContent
└── AlertDialogPositioner
AlertDialogTitle
AlertDialogDescription
AlertDialogActionUsage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";<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 from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused control. |
Space | Activate the focused control. |
Demos
Basic
A basic alert dialog with a title, description, and cancel and continue buttons.
Small
Use the size="sm" prop to make the alert dialog smaller.
Media
Use AlertDialogMedia to add a media element such as an icon or image.
Small Media
Use size="sm" with AlertDialogMedia for a compact dialog with an icon.
Destructive
Use AlertDialogAction with variant="destructive" for a destructive action.
Rtl
Right-to-left alert dialog. See the RTL configuration guide for document direction.
API Reference
AlertDialog
PropType
AttributeType
AlertDialogTrigger
PropType
AttributeType
AlertDialogPortal
PropType
AttributeType
AlertDialogOverlay
PropType
AttributeType
AlertDialogContent
PropType
AttributeType
AlertDialogHeader
PropType
AttributeType
AlertDialogFooter
PropType
AttributeType
AlertDialogMedia
PropType
AttributeType
AlertDialogTitle
PropType
AttributeType
AlertDialogDescription
PropType
AttributeType
AlertDialogAction
PropType
AttributeType
AlertDialogCancel
PropType
AttributeType