AlertDialog

A headless confirmation dialog that seeks user input before proceeding. Features a wait()/close() pattern for deferred close during async operations.

Usage

AlertDialog mirrors Dialog but with stricter defaults: no close on click outside, no close on escape. The Action component provides a deferred close pattern for async confirmation flows.

Anatomy

<script setup lang="ts">
  import { AlertDialog } from '@vuetify/v0'
</script>

<template>
  <AlertDialog.Root>
    <AlertDialog.Activator />

    <AlertDialog.Content>
      <AlertDialog.Title />

      <AlertDialog.Description />

      <AlertDialog.Close />

      <AlertDialog.Cancel />

      <AlertDialog.Action />
    </AlertDialog.Content>
  </AlertDialog.Root>
</template>

Examples

Async confirmation

Use the wait()/close() pattern to keep the dialog open during async operations. The isPending slot prop tracks loading state.

Accessibility

AlertDialog uses role="alertdialog" instead of role="dialog", signaling to assistive technologies that the dialog requires an immediate response.

Keyboard interaction

Focus management

Focus moves to the Cancel button on open, as it represents the safest action. This follows the WAI-ARIA alertdialog pattern where destructive actions should not receive initial focus.