ConfirmPopup

ConfirmPopup displays a confirmation overlay displayed relatively to its target.

Import #


import ConfirmPopup from 'primevue/confirmpopup';

Service #

ConfirmPopup 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 #

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


<ConfirmPopup></ConfirmPopup>
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>

Template #

Templating allows customizing the message content.


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

Headless #

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


<ConfirmPopup group="headless">
    <template #container="{ message, acceptCallback, rejectCallback }">
        <div class="bg-gray-900 text-white border-round p-3">
            <span>{{ message.message }}</span>
            <div class="flex align-items-center gap-2 mt-3">
                <Button label="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
                <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
            </div>
        </div>
    </template>
</ConfirmPopup>
<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>

Accessibility #

Screen Reader

ConfirmPopup component uses alertdialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. 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, ConfirmPopup adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the dialog is defined.


<ConfirmPopup id="confirm" aria-label="popup" />

<Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" />


<script setup>
const confirm = useConfirm();
const isVisible = ref(false);
const openPopup = (event) => {
    confirm.require({
        target: event.currentTarget,
        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 popup.
shift + tab	Moves focus to the previous the focusable element within the popup.
escape	Closes the popup and moves focus to the trigger.

Buttons Keyboard Support

Key	Function
enter	Triggers the action, closes the popup and moves focus to the trigger.
space	Triggers the action, closes the popup and moves focus to the trigger.