AlertDialog

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

Copy Markdown

Renders elementIntermediateApr 3, 2026

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.

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

<template>
  <div class="flex justify-center">
    <AlertDialog.Root>
      <AlertDialog.Activator class="px-4 py-2 bg-error text-on-error rounded-md text-sm font-medium">
        Delete Item
      </AlertDialog.Activator>

      <AlertDialog.Content class="m-auto rounded-xl bg-surface border border-divider max-w-md w-full">
        <div class="px-4 py-2 border-b border-divider">
          <AlertDialog.Title as="h3" class="text-lg font-semibold text-on-surface">
            Are you sure?
          </AlertDialog.Title>

          <AlertDialog.Description class="text-sm text-on-surface-variant">
            This action cannot be undone.
          </AlertDialog.Description>
        </div>

        <div class="p-4 space-y-4">
          <p class="text-sm text-on-surface leading-relaxed">
            This will permanently delete the item and all associated data.
            You will not be able to recover it.
          </p>
        </div>

        <div class="flex gap-3 justify-end p-4 pt-0">
          <AlertDialog.Cancel class="px-4 py-2 text-sm font-medium rounded-md border border-divider hover:bg-surface-tint">
            Cancel
          </AlertDialog.Cancel>

          <AlertDialog.Action class="px-4 py-2 text-sm font-medium rounded-md bg-error text-on-error">
            Delete
          </AlertDialog.Action>
        </div>
      </AlertDialog.Content>
    </AlertDialog.Root>
  </div>
</template>

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.

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

  function onDelete (e: AlertDialogActionEvent) {
    e.wait()

    // Simulate async operation
    setTimeout(() => {
      e.close()
    }, 2000)
  }
</script>

<template>
  <div class="flex justify-center">
    <AlertDialog.Root>
      <AlertDialog.Activator class="px-4 py-2 bg-error text-on-error rounded-md text-sm font-medium">
        Delete Item
      </AlertDialog.Activator>

      <AlertDialog.Content class="m-auto rounded-xl bg-surface border border-divider max-w-md w-full">
        <div class="px-4 py-2 border-b border-divider">
          <AlertDialog.Title as="h3" class="text-lg font-semibold text-on-surface">
            Are you sure?
          </AlertDialog.Title>

          <AlertDialog.Description class="text-sm text-on-surface-variant">
            This will permanently delete the item.
          </AlertDialog.Description>
        </div>

        <div class="flex gap-3 justify-end p-4">
          <AlertDialog.Cancel class="px-4 py-2 text-sm font-medium rounded-md border border-divider hover:bg-surface-tint">
            Cancel
          </AlertDialog.Cancel>

          <AlertDialog.Action
            v-slot="{ isPending }"
            class="px-4 py-2 text-sm font-medium rounded-md bg-error text-on-error disabled:opacity-50"
            @action="onDelete"
          >
            {{ isPending ? 'Deleting...' : 'Delete' }}
          </AlertDialog.Action>
        </div>
      </AlertDialog.Content>
    </AlertDialog.Root>
  </div>
</template>

Accessibility

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

Keyboard interaction

Key	Behavior
`Tab`	Moves focus between Cancel and Action buttons
`Escape`	Blocked by default (opt-in via `closeOnEscape` prop)
`Enter` / `Space`	Activates the focused button