Alert Dialog

Overlay

A confirmation modal with a Cancel and Confirm action. Use it for destructive or irreversible operations.

Props

Prop	Type	Default	Description
`modelValue`*	`boolean`	`false`	Open state (v-model).
`title`	`string`	`"Are you sure?"`	Dialog title.
`description`	`string`	`–`	Dialog description (also default slot).
`confirmLabel`	`string`	`"Confirm"`	Label for confirm button.
`cancelLabel`	`string`	`"Cancel"`	Label for cancel button.
`variant`	`"default" \| "destructive"`	`"default"`	Changes the confirm button style.
`loading`	`boolean`	`false`	Shows loading state on confirm button.

Examples

Default

vue

<script setup>
const open = ref(false)
</script>
<template>
  <DsButton @click="open = true">Delete account</DsButton>
  <DsAlertDialog
    v-model="open"
    title="Delete account?"
    description="This will permanently delete your account and all data."
    confirm-label="Delete"
    cancel-label="Cancel"
    variant="destructive"
    @confirm="open = false"
    @cancel="open = false"
  />
</template>

Destructive

vue

<script setup>
const open = ref(false)
</script>
<template>
  <DsButton @click="open = true">Delete account</DsButton>
  <DsAlertDialog
    v-model="open"
    title="Delete account?"
    description="This will permanently delete your account and all data."
    confirm-label="Delete"
    cancel-label="Cancel"
    variant="destructive"
    @confirm="open = false"
    @cancel="open = false"
  />
</template>

Skeleton

Use DsAlertDialogSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsAlertDialogSkeleton />

Accessibility

role="alertdialog" with aria-modal="true".
ESC key closes the dialog.
Backdrop click cancels.
Focus trap inside the dialog.

Alert

Badge