ConfirmPopup

Confirm inside a popover

A quick "are you sure?" next to the button that asked, for a small step that can't be taken back — delete a draft, revoke a share link. If it can be taken back, don't ask: do it and offer Undo from a Toaster. For something serious, where the whole page should stop, use an AlertDialog.

Basic

Delete this episode? This cannot be undone.

Publish

Make it visible to everyone?

<script setup lang="ts">
import { BlessButton, BlessConfirmPopup, useToast } from "blessing-ui";
const { success, info } = useToast();
</script>

<template>
  <div class="row">
    <BlessConfirmPopup
      message="Delete this episode? This cannot be undone."
      confirm-label="Delete"
      color="danger"
      @confirm="success('Deleted')"
      @cancel="info('Kept')"
    >
      <template #trigger
        ><BlessButton color="danger" variant="outline">Delete</BlessButton></template
      >
    </BlessConfirmPopup>
    <BlessConfirmPopup
      title="Publish"
      message="Make it visible to everyone?"
      placement="right"
      @confirm="success('Published')"
    >
      <template #trigger><BlessButton>Publish</BlessButton></template>
    </BlessConfirmPopup>
  </div>
</template>

Not inside <p>

The floating panel is a <div>. HTML closes a <p> when it meets a <div>, so a trigger placed inside a paragraph renders differently on the server and the client. Wrap with <span>/<div> instead.

• Opening moves focus to Cancel, the safe choice; confirming or cancelling returns it to the trigger.
• @confirm / @cancel; name the action in confirmLabel ("Remove", not "OK").

Usage

import { BlessConfirmPopup } from "blessing-ui";

API

Props

Name	Type	Default	Description
message*	string	—
title	string	—
confirmLabel	string	"Confirm"
cancelLabel	string	"Cancel"
color	"text" | "accent" | "danger"	"text"
placement	Placement	"bottom"
open	boolean	false

Events

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

Slots

Name	Scope	Description
trigger	{ open: boolean; }