AlertDialog

Confirm dialog

A question that must be answered before going on, usually before something that can't be undone — delete, discard, leave. For information that needs no answer, use a Toast or an Alert; for a quick confirm next to the button, ConfirmPopup. If the action can be reversed, don't ask: do it and offer Undo in a toast.

Basic

Delete project?

This permanently removes the project and its 12 files.

<script setup lang="ts">
import { ref } from "vue";
import { BlessAlertDialog, BlessButton, useToast } from "blessing-ui";
const open = ref(false);
const busy = ref(false);
const { success } = useToast();
async function del() {
  busy.value = true;
  await new Promise((r) => setTimeout(r, 800));
  busy.value = false;
  open.value = false;
  // no Undo: this can't be reversed, which is the only reason to ask first
  success({ title: "Project deleted" });
}
</script>

<template>
  <BlessButton color="danger" @click="open = true">Delete project</BlessButton>
  <BlessAlertDialog
    v-model="open"
    title="Delete project?"
    description="This permanently removes the project and its 12 files."
    confirm-label="Delete"
    :loading="busy"
    @confirm="del"
  />
</template>

• It is read as an alert dialog with its title and description. Focus starts on Cancel, the safe choice; Esc also cancels.
• Clicking outside doesn't close it. @confirm and @cancel say which way it went; loading holds the confirm button while you work.
• Name the action in the button (confirmLabel="Delete"), not "OK".

Usage

import { BlessAlertDialog } from "blessing-ui";

API

Props

Name	Type	Default	Description
title*	string	—
description	string	—
confirmLabel	string	"Confirm"
cancelLabel	string	"Cancel"
color	"text" | "accent" | "danger"	"danger"	confirm button color
loading	boolean	—
modelValue	boolean	false

Events

Name	Payload	Description
cancel	[]
update:modelValue	[value: boolean]
confirm	[]

Slots

Name	Scope	Description
default	—