Popconfirm

A lightweight confirmation popup that attaches to a trigger element. Ideal for inline confirmations before destructive or important actions.

Basic

<VxPopconfirm title="Are you sure?" @confirm="onConfirm" @cancel="onCancel">
  <VxButton>Click me</VxButton>
</VxPopconfirm>

With Description

<VxPopconfirm title="Delete this item?" description="This action cannot be undone.">
  <VxButton>Delete</VxButton>
</VxPopconfirm>

Types

<VxPopconfirm title="Info confirmation" type="info">
  <VxButton>Info</VxButton>
</VxPopconfirm>

<VxPopconfirm title="Operation successful" type="success">
  <VxButton>Success</VxButton>
</VxPopconfirm>

<VxPopconfirm title="Proceed with caution?" type="warning">
  <VxButton>Warning</VxButton>
</VxPopconfirm>

<VxPopconfirm title="Delete permanently?" description="All data will be lost." type="danger">
  <VxButton variant="destructive">Danger</VxButton>
</VxPopconfirm>

Hover Trigger

Open the popconfirm on hover instead of click.

<VxPopconfirm title="Remove from list?" trigger="hover" type="warning">
  <VxButton>Hover me</VxButton>
</VxPopconfirm>

Before Confirm Hook

Run an async validation before the confirm action proceeds. The spinner shows automatically during the check. If the function returns false or throws, the confirm is blocked.

<script setup>
async function validate() {
  const ok = await checkServer()
  return ok // return false to block confirm
}
</script>

<VxPopconfirm title="Save changes?" :before-confirm="validate" @confirm="onConfirm">
  <VxButton>Save</VxButton>
</VxPopconfirm>

Auto Close

Automatically dismiss the popconfirm after a timeout (in ms).

<VxPopconfirm title="Quick! Confirm within 3s" :auto-close="3000">
  <VxButton>Auto Close (3s)</VxButton>
</VxPopconfirm>

Condition

When condition is false, clicking the trigger fires confirm immediately without showing the popup. Useful for toggling confirmation on or off.

<script setup>
const needConfirm = ref(true)
</script>

<VxPopconfirm title="Are you sure?" :condition="needConfirm" @confirm="onDelete">
  <VxButton>Delete</VxButton>
</VxPopconfirm>

<VxSwitch v-model="needConfirm" /> Require confirmation

Custom Icon Slot

Replace the default type icon with your own.

<VxPopconfirm title="Publish article?">
  <template #icon>
    <div class="my-icon">
      <MyCustomIcon />
    </div>
  </template>
  <VxButton>Custom Icon</VxButton>
</VxPopconfirm>

Custom Actions Slot

Fully customize the footer buttons. The slot provides confirm, cancel functions and loading state.

<VxPopconfirm title="Choose an action">
  <template #actions="{ confirm, cancel }">
    <button @click="cancel">Skip</button>
    <button @click="saveDraft">Draft</button>
    <button @click="confirm">Publish</button>
  </template>
  <VxButton>Three Actions</VxButton>
</VxPopconfirm>

Loading

<script setup>
const loading = ref(false)

function onConfirm() {
  loading.value = true
  deleteRecord().finally(() => { loading.value = false })
}
</script>

<VxPopconfirm
  title="Delete this record?"
  type="danger"
  :loading="loading"
  @confirm="onConfirm"
>
  <VxButton variant="destructive">Delete</VxButton>
</VxPopconfirm>

No Icon

<VxPopconfirm title="Are you sure?" :icon="false">
  <VxButton>No Icon</VxButton>
</VxPopconfirm>

Custom Button Text

<VxPopconfirm
  title="Discard draft?"
  confirm-text="Discard"
  cancel-text="Keep Editing"
  type="warning"
>
  <VxButton>Discard</VxButton>
</VxPopconfirm>

No Cancel Button

<VxPopconfirm title="Continue?" :show-cancel="false">
  <VxButton>Acknowledge</VxButton>
</VxPopconfirm>

Disabled

<VxPopconfirm title="This won't open" disabled>
  <VxButton disabled>Disabled</VxButton>
</VxPopconfirm>

Custom Content Slot

<VxPopconfirm title="Update settings?">
  <template #content>
    <div>
      This will apply to <strong>all team members</strong>. Are you sure?
    </div>
  </template>
  <VxButton>Update</VxButton>
</VxPopconfirm>

Programmatic Usage

Use usePopconfirm() for a Promise-based API. Resolves on confirm, rejects on cancel.

<script setup>
import { usePopconfirm } from 'veloxui'

const popconfirm = usePopconfirm()

// Basic
popconfirm('Are you sure?')
  .then(() => console.log('Confirmed'))
  .catch(() => console.log('Cancelled'))

// Type-specific with options
popconfirm.danger({
  title: 'Delete account?',
  description: 'This cannot be undone.',
  confirmText: 'Delete',
}).then(() => { ... })

// Other types
popconfirm.success({ title: 'Publish?' })
popconfirm.warning({ title: 'Discard changes?' })
popconfirm.info({ title: 'Continue?' })
</script>

API

Props

Prop	Type	Default	Description
title	string	''	Title text
description	string	''	Description text
type	'info' | 'success' | 'warning' | 'danger'	'info'	Type variant (affects icon and confirm button color)
icon	boolean	true	Show type icon
confirmText	string	'Yes'	Confirm button text
cancelText	string	'No'	Cancel button text
showCancel	boolean	true	Show cancel button
loading	boolean	false	Show loading spinner on confirm button (prevents close)
disabled	boolean	false	Disable opening the popconfirm
width	string | number	280	Panel width
gap	number	8	Gap between trigger and panel in px
trigger	'click' | 'hover'	'click'	How to open the popconfirm
beforeConfirm	() => boolean | Promise<boolean>	—	Async guard before confirm. Return false or throw to block
autoClose	number	0	Auto-dismiss after N milliseconds (0 = disabled)
hideOnRouteChange	boolean	true	Auto-close when browser navigation occurs
condition	boolean	true	When false, skips the popup and fires confirm immediately

Events

Event	Payload	Description
confirm	—	Emitted when confirm button is clicked (and beforeConfirm passes)
cancel	—	Emitted when cancel button is clicked
open	—	Emitted when popconfirm opens
close	—	Emitted when popconfirm closes

Slots

Slot	Props	Description
default	—	Trigger element
content	—	Custom content below the title (replaces description)
icon	—	Custom icon (replaces the default type icon)
actions	{ confirm, cancel, loading }	Custom action buttons

usePopconfirm

const popconfirm = usePopconfirm()

popconfirm(options: PopconfirmOptions | string): Promise<void>
popconfirm.info(options): Promise<void>
popconfirm.success(options): Promise<void>
popconfirm.warning(options): Promise<void>
popconfirm.danger(options): Promise<void>

PopconfirmOptions:

Option	Type	Default	Description
title	string	—	Title text
description	string	—	Description text
type	PopconfirmType	'info'	Type variant
icon	boolean	true	Show icon
confirmText	string	'Yes'	Confirm button text
cancelText	string	'No'	Cancel button text
showCancel	boolean	true	Show cancel button
width	string | number	280	Panel width
beforeConfirm	() => boolean | Promise<boolean>	—	Async guard
autoClose	number	0	Auto-dismiss timeout