Popconfirm

A lightweight confirmation popover that appears when clicking a trigger element. It's more lightweight than a Dialog for simple confirm/cancel actions.

Preview

Preview

Installation

pnpm dlx brutx-vue@latest add popconfirm

Usage

<script setup>
import { Popconfirm, Button } from 'brutx-ui-vue'

function handleConfirm() {
    console.log('Confirmed!')
}

function handleCancel() {
    console.log('Cancelled!')
}
</script>

<template>
    <Popconfirm
        title="Are you sure you want to delete this item?"
        @confirm="handleConfirm"
        @cancel="handleCancel"
    >
        <Button variant="destructive">Delete</Button>
    </Popconfirm>
</template>

Custom Button Text

<script setup>
import { Popconfirm, Button } from 'brutx-ui-vue'
</script>

<template>
    <Popconfirm
        title="Submit this form?"
        confirm-button-text="Yes, submit"
        cancel-button-text="No, go back"
        confirm-button-type="primary"
    >
        <Button>Submit</Button>
    </Popconfirm>
</template>

Destructive Action

<script setup>
import { Popconfirm, Button } from 'brutx-ui-vue'
</script>

<template>
    <Popconfirm
        title="This action cannot be undone."
        confirm-button-type="destructive"
        :cancelable="false"
    >
        <Button variant="destructive">Delete Account</Button>
    </Popconfirm>
</template>

API Reference

Popconfirm — Props

Name	Type	Default	Description
title Required	string	—	The title text displayed in the confirmation popover.
Details Declared type string Default value details Not declared — Source Popconfirm.vue:10 packages/ui/src/components/popconfirm/Popconfirm.vue
confirmButtonText	string | undefined	undefined	The confirm button label; localized default text is used when omitted.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/popconfirm/Popconfirm.vue Resolved value undefined Source Popconfirm.vue:12 packages/ui/src/components/popconfirm/Popconfirm.vue
cancelButtonText	string | undefined	undefined	The cancel button label; localized default text is used when omitted.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/popconfirm/Popconfirm.vue Resolved value undefined Source Popconfirm.vue:14 packages/ui/src/components/popconfirm/Popconfirm.vue
confirmButtonType	"primary" | "destructive" | undefined	"primary"	Sets the confirm button to the primary or destructive action style.
Details Declared type "primary" | "destructive" | undefined Literal values "destructive" "primary" Default value details Declaration 'primary' Source: packages/ui/src/components/popconfirm/Popconfirm.vue Resolved value "primary" Source Popconfirm.vue:16 packages/ui/src/components/popconfirm/Popconfirm.vue
icon	Component | undefined	undefined	The Vue icon component replacing the default warning icon; TriangleAlert is shown when omitted.
Details Declared type Component | undefined Default value details Declaration undefined Source: packages/ui/src/components/popconfirm/Popconfirm.vue Resolved value undefined Source Popconfirm.vue:18 packages/ui/src/components/popconfirm/Popconfirm.vue
cancelable	boolean | undefined	true	Controls whether the cancel button is rendered.
Details Declared type boolean | undefined Literal values false true Default value details Declaration true Source: packages/ui/src/components/popconfirm/Popconfirm.vue Resolved value true Source Popconfirm.vue:20 packages/ui/src/components/popconfirm/Popconfirm.vue
class	string | undefined	undefined	Custom CSS classes added to the popover content container.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/popconfirm/Popconfirm.vue Resolved value undefined Source Popconfirm.vue:21 packages/ui/src/components/popconfirm/Popconfirm.vue
open	boolean | undefined	false	The confirmation popover open state, available through v-model:open.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/popconfirm/Popconfirm.vue Resolved value false Source Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue

Popconfirm — Events

Name	Signature or type	Description
@update:open	[value: boolean]	Emits the new boolean value when the popover open state changes.
Details Declared type [value: boolean] Literal values false true Source Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue
@confirm	[]	Closes the popover and emits after the user activates the confirm button.
Details Declared type [] Source Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue
@cancel	[]	Closes the popover and emits after the user activates the cancel button.
Details Declared type [] Source Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue

Popconfirm — Slots

Name	Signature or type	Description
#default	{}	Provides the element that triggers the confirmation popover.
Details Declared type {} Source Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue
#icon	{}	Replaces the content of the default warning icon area.
Details Declared type {} Source Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue
#description	{}	Renders explanatory content below the title and associates it as the alert dialog description.
Details Declared type {} Source Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue

Accessibility

• Built on top of Popover which follows WAI-ARIA dialog pattern
• Keyboard: Escape to close, Tab to navigate between buttons
• Focus Management: Focus is trapped within the popover when open
• ARIA Attributes: Buttons have appropriate labels