ConfirmPopup

ConfirmPopup displays a confirmation overlay displayed relatively to its target.


import ConfirmPopup from 'primevue/confirmpopup';

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);

$confirm is available as a property in the application instance for Options API. The service can be injected with the useConfirm function for Composition API.



import { useConfirm } from "primevue/useconfirm";

const confirm = useConfirm();

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



<ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center">
    <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
    <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
</div>

Templating allows customizing the content where the message instance is available as the implicit variable.



<ConfirmPopup group="demo">
    <template #message="slotProps">
        <div class="flex p-4">
            <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
            <p class="pl-2">{{ slotProps.message.message }}</p>
        </div>
    </template>
</ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center">
    <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
</div>

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-confirm-popupContainer element.
p-confirm-popup-contentContent element.
p-confirm-popup-iconMessage icon.
p-confirm-popup-messageMessage text.
p-confirm-popup-footerFooter element for buttons.

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, ConfirmDialog 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

KeyFunction
tabMoves focus to the next the focusable element within the popup.
shift + tabMoves focus to the previous the focusable element within the popup.
escapeCloses the popup and moves focus to the trigger.

Buttons Keyboard Support

KeyFunction
enterTriggers the action, closes the popup and moves focus to the trigger.
spaceTriggers the action, closes the popup and moves focus to the trigger.