Alert Dialog

A modal dialog for confirming destructive or important actions that requires explicit user response

The Alert Dialog component displays a modal dialog that interrupts the user to confirm a critical action. Unlike regular dialogs, alert dialogs cannot be dismissed by clicking the overlay — users must explicitly choose an action. Built on Radix UI Alert Dialog.

Import

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

Basic Usage

Code

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Delete Item</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone. This will permanently delete the item.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel asChild>
        <Button variant="outline">Cancel</Button>
      </AlertDialogCancel>
      <AlertDialogAction asChild>
        <Button>Continue</Button>
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Destructive Variant

Use variant="destructive" for dangerous actions like account deletion. This adds a red accent border to visually signal danger.

Code

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete Account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent variant="destructive">
    <AlertDialogHeader>
      <AlertDialogTitle>Delete Account</AlertDialogTitle>
      <AlertDialogDescription>This will permanently delete your account and all associated data.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel asChild>
        <Button variant="outline">Cancel</Button>
      </AlertDialogCancel>
      <AlertDialogAction asChild>
        <Button variant="destructive">Delete</Button>
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Controlled Mode

function ControlledAlertDialog() {
  const [open, setOpen] = useState(false);

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger asChild>
        <Button>Controlled</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Confirm</AlertDialogTitle>
          <AlertDialogDescription>Are you sure?</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel asChild>
            <Button variant="outline">Cancel</Button>
          </AlertDialogCancel>
          <AlertDialogAction asChild>
            <Button onClick={() => setOpen(false)}>Confirm</Button>
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Component Architecture

Component	Description
`AlertDialog`	Root component managing open/close state (Radix AlertDialog.Root)
`AlertDialogTrigger`	Element that opens the alert dialog on click
`AlertDialogContent`	Centered modal panel with variant styling, rendered via Portal
`AlertDialogOverlay`	Backdrop overlay (included automatically by Content)
`AlertDialogHeader`	Container for Title and Description
`AlertDialogFooter`	Container for Action and Cancel buttons
`AlertDialogTitle`	Dialog heading, linked via aria-labelledby
`AlertDialogDescription`	Dialog body text, linked via aria-describedby
`AlertDialogAction`	Confirm button that closes the dialog
`AlertDialogCancel`	Cancel button that closes the dialog

Props

AlertDialog (Root)

Name	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage
`onOpenChange`	`(open: boolean) => void`	-	Callback when the open state changes

AlertDialogContent

Name	Type	Default	Description
`variant`	`'default' \| 'destructive'`	`'default'`	Visual style variant. Use destructive for dangerous actions.
`className`	`string`	-	Additional CSS classes

AlertDialogAction / AlertDialogCancel

Name	Type	Default	Description
`asChild`	`boolean`	`false`	Use child element as the button

Accessibility

Built on Radix UI Alert Dialog with full accessibility support:

role="alertdialog": Content is announced as an alert dialog to screen readers
aria-labelledby: Automatically linked to AlertDialogTitle
aria-describedby: Automatically linked to AlertDialogDescription
Focus trapping: Focus is trapped within the dialog while open
Focus restoration: Focus returns to the trigger when the dialog closes
Escape key: Pressing Escape dismisses the dialog
No overlay dismiss: Clicking the overlay does NOT close the dialog (requires explicit action)
Portal rendering: Content renders outside the DOM hierarchy without affecting the accessibility tree

Keyboard Support

Key	Action
Enter / Space	Open dialog (on trigger)
Escape	Close the dialog
Tab	Navigate within dialog content

Alert Dialog vs Dialog

Feature	Alert Dialog	Dialog (Modal)
Overlay dismiss	No	Yes
ARIA role	alertdialog	dialog
Use case	Destructive/important confirmations	General content
User response	Required (Action or Cancel)	Optional

Modal — General-purpose dialog overlay
Popover — Non-modal floating panel

On this page