ConfirmDialog

Overlay

Simplified confirmation dialog with danger or primary variant.

Props

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	Controls the open/closed state (v-model).
`title`	`string`	`"Are you sure?"`	Dialog title.
`description`	`string`	`"This action cannot be undone."`	Description.
`confirmLabel`	`string`	`"Confirm"`	Label for the confirm button.
`cancelLabel`	`string`	`"Cancel"`	Label for the cancel button.
`variant`	`"danger" \| "primary"`	`"danger"`	Color of the confirm button.
`loading`	`boolean`	`false`	Loading state during confirmation.

Examples

Confirmation dialog

vue

<script setup>
const open = ref(false)
function onConfirm() {
  // handle delete
  open.value = false
}
</script>
<template>
  <DsButton variant="destructive" @click="open = true">Delete account</DsButton>
  <DsConfirmDialog
    v-model="open"
    title="Delete account?"
    description="This action is irreversible. All your data will be permanently deleted."
    confirm-label="Yes, delete"
    cancel-label="Cancel"
    variant="danger"
    @confirm="onConfirm"
  />
</template>

Skeleton

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

Default

vue

<DsConfirmDialogSkeleton />

Accessibility

role="alertdialog" and aria-modal="true".
Escape closes the dialog.
Clicking the backdrop cancels.

Collapsible

Drawer