AlertDialog

A dialog that asks the user to confirm or cancel before continuing.

1<template>2  <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.">3    <template #cancel>4      <Button variant="ghost">Cancel</Button>5    </template>6    <template #action>7      <Button variant="destructive" @click="onConfirm">Delete</Button>8    </template>9  </AlertDialog>10</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.

Guidelines

Do

Reach for AlertDialog instead of Dialog when the user must make an explicit choice before continuing - confirming a destructive or otherwise hard-to-reverse action. If they can safely click away and come back to it later, that's a Dialog, not this.
Always provide both #cancel and #action - those are the only two ways out. Put the least destructive choice first: cancel as variant="secondary", the decision itself last (variant="destructive" for a delete/remove, variant="primary" otherwise).
Bind v-model:open to a local ref(false), same as Dialog.

Give it a description - an alert dialog interrupts the user, so it should always say why.

Don't

Don't expect a close (×) button - AlertDialog never renders one. The only way to dismiss it is #cancel, #action, or the Escape key.
Don't expect clicking the overlay to dismiss it either - unlike Dialog, outside clicks are ignored on purpose. An alert dialog demands a decision, not a shrug.
Don't put more than one action's worth of content in #body - this is for a short confirmation, not a form. Reach for Dialog if the content needs more room.

Don't use this for anything non-destructive/reversible "just to be safe" - every extra confirmation the user has to click through trains them to stop reading the ones that actually matter.

Examples

Basic

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

1const open = ref(false)23<Button variant="secondary" @click="open = true">Delete account</Button>4<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.">5  <template #cancel>6    <Button variant="ghost">Cancel</Button>7  </template>8  <template #action>9    <Button variant="destructive" @click="onConfirm">Delete</Button>10  </template>11</AlertDialog>