Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Installation

›pnpm dlx shadcn@latest add @evolphin/alert-dialog

Usage

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

<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Type Definitions

interface AlertDialogProps {
  /** The controlled open state of the dialog */
  open?: boolean;  
AlertDialogProps.open?: boolean | undefined
The controlled open state of the dialog
  /** The default open state when uncontrolled */
  ?: boolean;
  /** Event handler called when the open state changes */
  ?: (: boolean) => void;
}

Examples

Default

API Reference

AlertDialog

Prop	Type	Default	Description
`open`	`boolean`	-	The controlled open state of the dialog.
`defaultOpen`	`boolean`	-	The default open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.

AlertDialogTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

AlertDialogContent

Prop	Type	Default	Description
`forceMount`	`boolean`	-	Used to force mounting when more control is needed.
`onOpenAutoFocus`	`(event: Event) => void`	-	Event handler called when focus moves into the component after opening.
`onCloseAutoFocus`	`(event: Event) => void`	-	Event handler called when focus moves to the trigger after closing.
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	Event handler called when the escape key is down.

AlertDialogAction

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

AlertDialogCancel

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

Accessibility

Keyboard:
- Space or Enter: Opens the dialog when focus is on the trigger.
- Esc: Closes the dialog.
- Tab: Moves focus to the next focusable element within the dialog.
Screen Reader:
- AlertDialogContent has role="alertdialog".
- AlertDialogContent has aria-labelledby set to the ID of the AlertDialogTitle.
- AlertDialogContent has aria-describedby set to the ID of the AlertDialogDescription.
Focus: Focus is automatically trapped within the dialog.

Search

On this page