AlertDialog

A modal that interrupts the user and demands an explicit decision — confirm or cancel — before they can continue.

<template>
  <AlertDialog v-model:open="open" title="Delete repository" description="This will permanently delete the repository and all of its scan history. This can't be undone.">
    <template #cancel>
      <Button variant="ghost">Cancel</Button>
    </template>
    <template #action>
      <Button variant="destructive" @click="onConfirm">Delete</Button>
    </template>
  </AlertDialog>
</template>

Props

Name	Type	Default
open	boolean (v-model:open)	false
title	string	—
description	string	—

Slots

Name	Description
body	Optional extra content between the description and the actions — keep it short, this isn't a form.
cancel	Required. Wrapped in reka-ui's AlertDialogCancel (as-child) — put a single <Button> here, e.g. variant="ghost". Closes on click and is where focus lands when the dialog opens.
action	Required. Wrapped in reka-ui's AlertDialogAction (as-child) — put a single <Button> here, e.g. variant="destructive" for a delete/remove. Closes on click; add your own @click handler alongside for the actual confirm logic.
title	Escape hatch: replaces the `title` prop's plain text.
description	Escape hatch: replaces the `description` prop's plain text.

Usage

Examples

Basic

A destructive action the user must explicitly confirm or cancel — no dismiss-and-forget.

const open = ref(false)

<Button variant="secondary" @click="open = true">Delete account</Button>
<AlertDialog v-model:open="open" title="Delete account" description="This will permanently delete your account and remove all of your data. This can't be undone.">
  <template #cancel>
    <Button variant="ghost">Cancel</Button>
  </template>
  <template #action>
    <Button variant="destructive" @click="onConfirm">Delete</Button>
  </template>
</AlertDialog>