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.
Name | Element |
---|---|
p-confirm-popup | Container element. |
p-confirm-popup-content | Content element. |
p-confirm-popup-icon | Message icon. |
p-confirm-popup-message | Message text. |
p-confirm-popup-footer | Footer element for buttons. |
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>
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. |
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. |