GitHub55X

Alert Dialog

Vue alert dialog for critical confirmations and destructive actions that require an explicit user decision.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/alert-dialog.json

Usage

      
      <script setup lang="ts">
import { AlertDialog } from "@/components/ui/alert-dialog";
</script>

<template>
  <AlertDialog.Root>
    <AlertDialog.Trigger as-child>
      <Button>Delete Account</Button>
    </AlertDialog.Trigger>

    <AlertDialog.Content>
      <AlertDialog.Header>
        <AlertDialog.Title />
        <AlertDialog.Description />
      </AlertDialog.Header>

      <AlertDialog.Footer>
        <AlertDialog.Cancel />
        <AlertDialog.Confirm />
      </AlertDialog.Footer>
    </AlertDialog.Content>
  </AlertDialog.Root>
</template>

Alert Dialog is a pre-configured variant of Dialog with role="alertdialog". It hides the close button in the content panel and is intended for confirmations where the user must explicitly choose an action.

Compared to a regular dialog:

  • Automatic focus — the cancel/close action receives focus when opened, prioritizing the safest choice
  • Explicit dismissal — cannot be closed by clicking outside; only button clicks or the Escape key dismiss it

Composition

      
      AlertDialog.Root
├── AlertDialog.Trigger
└── AlertDialog.Content
    ├── AlertDialog.Header
    │   ├── AlertDialog.Title
    │   └── AlertDialog.Description
    └── AlertDialog.Footer
        ├── AlertDialog.Cancel
        └── AlertDialog.Confirm

API

Props, events, and hooks match Ark UI Dialog. See Ark UI Dialog docs for the full API.

      
      import {
  AlertDialog,
  useDialog,
  useDialogContext,
  dialogAnatomy,
} from "@/components/ui/alert-dialog";
AlertAngle Slider