Alert Dialog

A modal dialog that interrupts the user with important content and expects a response. Unlike a regular dialog, an alert dialog requires explicit acknowledgement before it can be dismissed.

Examples

Basic

Destructive

Overview

AlertDialog is a focused confirmation modal. It blocks backdrop dismissal and Escape — the user must pick one of the actions. Use it for irreversible operations like deletes and account changes; for general modals use Dialog.

tsx

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

<AlertDialog>
  <AlertDialogTrigger>Delete project</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This action can't be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>;

Usage

Destructive action

Pass variant="destructive" to AlertDialogAction for irreversible operations.

tsx

<AlertDialogAction variant="destructive" onClick={handleDelete}>
  Delete project
</AlertDialogAction>

Controlled

Control the dialog programmatically with open and onOpenChange.

tsx

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

<AlertDialog open={open} onOpenChange={setOpen}>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Confirm</AlertDialogTitle>
      <AlertDialogDescription>Are you sure?</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={handleConfirm}>Confirm</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>;

Alert Dialog vs Dialog

Feature	Dialog	Alert Dialog
Backdrop click	Closes dialog	Requires explicit action
Escape key	Closes dialog	Requires explicit action
Use case	Forms, settings, content	Confirmations, warnings, destructive actions

API

AlertDialog (Root)

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.

Subcomponents

Component	Purpose
`AlertDialogTrigger`	Button that opens the alert dialog.
`AlertDialogContent`	The popup container, including backdrop and portal.
`AlertDialogHeader`	Top section wrapper for title + description.
`AlertDialogTitle`	Required heading announced by screen readers.
`AlertDialogDescription`	Supporting copy below the title.
`AlertDialogFooter`	Bottom action row.
`AlertDialogCancel`	Cancel button that closes without confirming.
`AlertDialogAction`	Confirm button. Accepts `variant="destructive"` for danger flows.

Guidelines

Do

Use AlertDialog for irreversible operations (delete, archive, sign out)
Always provide an AlertDialogTitle and AlertDialogDescription
Label actions with the verb of the operation ("Delete project", not "OK")
Use variant="destructive" on the action when the operation can't be undone

Don't

Don't use AlertDialog for routine confirmations the user does dozens of times — it becomes noise
Don't pre-select the destructive action as the default focus
Don't write vague titles like "Confirm" — say what's about to happen
Don't use it for general forms or settings — use Dialog instead

PreviousAccordion

NextAvatar