Alert Dialog

Modal confirmation prompt that interrupts the user with critical content. Use for destructive actions and authorisation prompts; reach for Dialog when the modal is informational.

When to use AlertDialog vs Dialog

AlertDialog is for one-shot confirmations that need explicit acknowledgement (delete, sign out, discard changes). Dialog is the right pick for forms, multi-step flows, and informational content.

Anatomy

Import all parts and piece them together.

vue

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

<template>
  <AlertDialog>
    <AlertDialogTrigger />
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle />
        <AlertDialogDescription />
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel />
        <AlertDialogAction />
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

Default

Destructive confirmation pattern with cancel and action buttons.

Controlled

Drive open state externally with v-model:open from any button.

Non-destructive

A plain confirmation that asks before a routine action.

API Reference

Props, events, and slots for each sub-component.

AlertDialog

Props

Prop	Type	Default	Description
open	boolean	—	Open state. Supports v-model:open.

Events

Event	Description
update:open	Fires when the open state changes. Enables v-model:open.

Slots

Slot	Description
default	Trigger and content sub-components.

AlertDialogTrigger

Props

Prop	Type	Default	Description
asChild	boolean	false	Merge props onto the child element instead of rendering a button wrapper.

Slots

Slot	Description
default	The element that opens the dialog.

AlertDialogContent

Props

Prop	Type	Default	Description
class	string	—	Extra classes, merged with cn(). Forwards remaining props to reka-ui AlertDialogContent.

Events

Event	Description
escape-key-down	Fires when the Escape key is pressed.
open-auto-focus	Fires when focus moves into the content on open.
close-auto-focus	Fires when focus returns to the trigger on close.

Slots

Slot	Description
default	Header, description, and footer sub-components.

AlertDialogAction / AlertDialogCancel

Props

Prop	Type	Default	Description
asChild	boolean	false	Render the child slot without the default button wrapper.

Accessibility

Keyboard shortcuts and ARIA behavior.

Keyboard

Shortcut	Description
`Space`	When focus is on the trigger, opens the dialog.
`Enter`	When focus is on the trigger, opens the dialog.
`Tab`	Cycles focus between the Cancel and Action buttons.
`Shift`+`Tab`	Cycles focus to the previous button.
`Esc`	Closes the dialog, cancelling the action.

On open, focus defaults to the AlertDialogCancel button so the safe choice is selected.
Uses role=alertdialog and is labelled by AlertDialogTitle and described by AlertDialogDescription.
Must be dismissed via an explicit action; outside clicks do not close it.

Alert Aspect Ratio