shadcn.io is not affiliated with official shadcn/ui

Shadcn Alert Dialog for React

A modal for critical confirmations and destructive actions.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/alert-dialog.json

npx shadcn@latest add https://kit.dev/r/aria/alert-dialog.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/alert-dialog.json

yarn shadcn@latest add https://kit.dev/r/aria/alert-dialog.json

This component depends on Button. Install it first if you haven't already.

Install the following dependencies:

bun add react-aria-components tailwind-variants

npm install react-aria-components tailwind-variants

pnpm add react-aria-components tailwind-variants

yarn add react-aria-components tailwind-variants

Copy and paste the following code into your project.

components/ui/alert-dialog.tsx

"use client";

import type React from "react";
import {
  Dialog as AlertDialogPrimitive,
  DialogTrigger as AlertDialogTriggerPrimitive,
  type DialogTriggerProps as AlertDialogTriggerPrimitiveProps,
  Heading,
  ModalOverlay as ModalOverlayPrimitive,
  type ModalOverlayProps as ModalOverlayPrimitiveProps,
  Modal as ModalPrimitive,
} from "react-aria-components";
import { cn } from "@/lib/utils";
import { Button, type ButtonProps } from "@/registry/aria/components/button";

export const AlertDialogTrigger = (props: AlertDialogTriggerPrimitiveProps) => (
  <AlertDialogTriggerPrimitive data-slot="alert-dialog-trigger" {...props} />
);

Update the import paths to match your project setup.

Anatomy

AlertDialogTrigger
AlertDialogOverlay
AlertDialogContent
└── AlertDialogPositioner
AlertDialogTitle
AlertDialogDescription
AlertDialogAction

Usage

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.

PreviewCode

Small

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

PreviewCode

Media

Use AlertDialogMedia to add a media element such as an icon or image.

PreviewCode

Small Media

Use size="sm" with AlertDialogMedia for a compact dialog with an icon.

PreviewCode

Destructive

Use AlertDialogAction with variant="destructive" for a destructive action.

PreviewCode

Rtl

Right-to-left alert dialog. See the RTL configuration guide for document direction.

PreviewCode

API Reference

AlertDialog

PropType

childrenReact.ReactNode

size?"default" | "sm"

className?string

AttributeType

data-slot"alert-dialog-content"

data-size?string

AlertDialogTrigger

PropType

childrenReact.ReactNode

size?"default" | "sm"

className?string

AttributeType

data-slot"alert-dialog-trigger"

AlertDialogOverlay

PropType

childrenReact.ReactNode

size?"default" | "sm"

className?string

AttributeType

data-slot"alert-dialog-overlay"

AlertDialogContent

PropType

childrenReact.ReactNode

size?"default" | "sm"

className?string

AlertDialogHeader

PropType

childrenReact.ReactNode

description?string

size?"default" | "sm"

title?string

className?string

AttributeType

data-slot"alert-dialog-header"

AlertDialogFooter

PropType

childrenReact.ReactNode

size?"default" | "sm"

className?string

AttributeType

data-slot"alert-dialog-footer"

AlertDialogMedia

PropType

childrenReact.ReactNode

size?"default" | "sm"

className?string

AttributeType

data-slot"alert-dialog-media"

AlertDialogTitle

PropType

childrenReact.ReactNode

size?"default" | "sm"

className?string

AlertDialogDescription

PropType

childrenReact.ReactNode

size?"default" | "sm"

className?string

AlertDialogAction

PropType

childrenReact.ReactNode

isDisabled?boolean

size?"default" | "sm"

className?string

AttributeType

data-slot"alert-dialog-action"

AlertDialogCancel

PropType

childrenReact.ReactNode

isDisabled?boolean

size?"default" | "sm"

className?string

AttributeType

data-slot"alert-dialog-cancel"