V3 has reached EOL, Upgrade to PrimeVue 4

ConfirmDialog

ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API.

Import #


import ConfirmDialog from 'primevue/confirmdialog';

Service #

ConfirmDialog is controlled via the ConfirmationService that needs to be installed as an application plugin.


import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';

const app = createApp(App);
app.use(ConfirmationService);

The service is available with the useConfirm function for Composition API or using the $confirm property of the application for Options API.


import { useConfirm } from "primevue/useconfirm";

const confirm = useConfirm();

Basic #

ConfirmDialog is displayed by calling the require method of the $confirm instance by passing the options to customize the Dialog. The target attribute is mandatory to align the popup to its referrer.


<ConfirmDialog></ConfirmDialog>
<Button @click="confirm1()" label="Save" outlined></Button>
<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>

Position #

The position property of the confirm options specifies the location of the Dialog.


<ConfirmDialog group="positioned"></ConfirmDialog>
<div class="flex flex-wrap justify-content-center gap-2 mb-3">
    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
    <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
</div>
<div class="flex flex-wrap justify-content-center gap-2 mb-3">
    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
</div>
<div class="flex flex-wrap justify-content-center gap-2">
    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
</div>

Template #

Templating allows customizing the message content.


<ConfirmDialog group="templating">
    <template #message="slotProps">
        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
            <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
            <p>{{ slotProps.message.message }}</p>
        </div>
    </template>
</ConfirmDialog>
<Button @click="showTemplate()" label="Save"></Button>

Headless #

Headless mode is enabled by defining a container slot that lets you implement entire confirmation UI instead of the default elements.


<ConfirmDialog group="headless">
    <template #container="{ message, acceptCallback, rejectCallback }">
        <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
            <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
                <i class="pi pi-question text-5xl"></i>
            </div>
            <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
            <p class="mb-0">{{ message.message }}</p>
            <div class="flex align-items-center gap-2 mt-4">
                <Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
                <Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
            </div>
        </div>
    </template>
</ConfirmDialog>
<Button @click="requireConfirmation()" label="Save"></Button>

Accessibility #

Screen Reader

ConfirmDialog component uses alertdialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup.

When require method of the $confirm instance is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the dialog is defined.


<ConfirmDialog id="confirm" />

<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>


<script setup>
const confirm = useConfirm();
const isVisible = ref(false);

const openDialog = () => {
    confirm.require({
        message: 'Are you sure you want to proceed?',
        header: 'Confirmation',
        onShow: () => {
            isVisible.value = true;
        },
        onHide: () => {
            isVisible.value = false;
        }
    });
};
</script>

Overlay Keyboard Support

Key	Function
tab	Moves focus to the next the focusable element within the dialog.
shift + tab	Moves focus to the previous the focusable element within the dialog.
escape	Closes the dialog.

Buttons Keyboard Support

Key	Function
enter	Closes the dialog.
space	Closes the dialog.

name	type	default	description
group	string	null	Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
breakpoints	ConfirmDialogBreakpoints	null	Object literal to define widths per screen size.
draggable	boolean	true	Enables dragging to change the position using header.
pt	PassThrough<ConfirmDialogPassThroughOptions	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
message	scope: { message: ConfirmationOptions, // Message of the component }	VNode<RendererNode, RendererElement, Object>[]	Custom message template.
icon	scope: { class: any, // Style class of the icon template }	VNode<RendererNode, RendererElement, Object>[]	Custom icon template.
accepticon		VNode<RendererNode, RendererElement, Object>[]	Custom icon template.
rejecticon		VNode<RendererNode, RendererElement, Object>[]	Custom icon template.
container	scope: { message: any, // Message of the component onClose: () ⇒ void, // Close dialog function. onAccept: () ⇒ void, // Accept function of the component onReject: () ⇒ void, // Reject function of the component closeCallback: () ⇒ void, // Close dialog function. acceptCallback: () ⇒ void, // Accept function of the component rejectCallback: () ⇒ void, // Reject function of the component }	VNode<RendererNode, RendererElement, Object>[]	Custom container slot.

name	type	default	description
instance	any	null	Defines instance.
props	ConfirmDialogProps	null	Defines valid properties.
state	ConfirmDialogState	null	Defines current inline state.
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
props	ConfirmDialogProps	null	Defines valid properties.
state	ConfirmDialogState	null	Defines current inline state.

name	type	default	description
root	ConfirmDialogPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
header	ConfirmDialogPassThroughOptionType	null	Used to pass attributes to the header's DOM element.
title	ConfirmDialogPassThroughOptionType	null	Used to pass attributes to the header title's DOM element.
icons	ConfirmDialogPassThroughOptionType	null	Used to pass attributes to the header icons' DOM element.
closeButton	ConfirmDialogPassThroughOptionType	null	Used to pass attributes to the close button's component.
closeButtonIcon	ConfirmDialogPassThroughOptionType	null	Used to pass attributes to the close button icon's component.
content	ConfirmDialogPassThroughOptionType	null	Used to pass attributes to the content's DOM element.
icon	ConfirmDialogPassThroughOptionType	null	Used to pass attributes to the icon's DOM element.
message	ConfirmDialogPassThroughOptionType	null	Used to pass attributes to the message's DOM element.
footer	ConfirmDialogPassThroughOptionType	null	Used to pass attributes to the footer's DOM element.
rejectButton	ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions	null	Used to pass attributes to the Button component.
acceptButton	ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions	null	Used to pass attributes to the Button component.
hooks	ComponentHooks	null	Used to manage all lifecycle hooks.

ConfirmDialog

Import #

Service #

Basic #

Position #

Template #

Headless #

Accessibility #

Screen Reader

Overlay Keyboard Support

Buttons Keyboard Support

ConfirmDialog API

ConfirmDialog #

Props #

Slots #

Interfaces #

ConfirmDialogPassThroughMethodOptions #

ConfirmDialogSharedPassThroughMethodOptions #

ConfirmDialogPassThroughOptions #

ConfirmDialogPassThroughAttributes #

ConfirmDialogState #

ConfirmDialogBreakpoints #

Types #

ConfirmDialogPassThroughOptionType #

ConfirmationService-UseConfirm #

Services #

ConfirmationOptions #

Options #

name	type	default	description
visible	boolean	false	Current visible state as a boolean.
confirmation	any	null	Current confirmation message.

name	parameters	returnType	description
require	options: ConfirmationOptions	void	Displays the dialog using the confirmation object options.
close		void	Hides the dialog without invoking accept or reject callbacks.

name	type	default	description
target	HTMLElement	null	Element to align the overlay.
header	string	null	Header text of the dialog.
message	string	null	Message of the confirmation.
group	string	null	Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
position	"center" \| "left" \| "top" \| "bottom" \| "right" \| "topleft" \| "topright" \| "bottomleft" \| "bottomright"	center	Position of the dialog.
icon	string	null	Icon to display next to the message.
blockScroll	boolean	false	Whether background scroll should be blocked when dialog is visible.
accept	Function	null
reject	Function	null
onShow	Function	null
onHide	Function	null
acceptLabel	string	null	Label of the accept button. Defaults to PrimeVue Locale configuration.
rejectLabel	string	null	Label of the reject button. Defaults to PrimeVue Locale configuration.
acceptIcon	string	null	Icon of the accept button.
rejectIcon	string	null	Icon of the reject button.
acceptClass	string	null	Style class of the accept button.
rejectClass	string	null	Style class of the reject button.
defaultFocus	string	null	Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".