ConfirmDialog is controlled via the ConfirmationService that needs to be installed globally before the application instance is created.
import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';
const app = createApp(App);
app.use(ConfirmationService);
import ConfirmDialog from 'primevue/confirmdialog';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/confirmdialog/confirmdialog.min.js"></script>
ConfirmDialog is displayed by calling the require method of the $confirm instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component where it can be shared by any component within the application.
<ConfirmDialog></ConfirmDialog>
<Button @click="delete()" icon="pi pi-check" label="Confirm"></Button>
export default {
methods: {
delete() {
this.$confirm.require({
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
//callback to execute when user confirms the action
},
reject: () => {
//callback to execute when user rejects the action
},
onShow: () => {
//callback to execute when dialog is shown
},
onHide: () => {
//callback to execute when dialog is hidden
}
});
},
}
}
The service can be injected with the useConfirm function.
import { defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm";
export default defineComponent({
setup() {
const confirm = useConfirm();
confirm.require({
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
//callback to execute when user confirms the action
},
reject: () => {
//callback to execute when user rejects the action
},
onShow: () => {
//callback to execute when dialog is shown
},
onHide: () => {
//callback to execute when dialog is hidden
}
});
}
})
The dialog can also be hidden programmatically using the close method.
export default {
methods: {
discard() {
this.$confirm.close();
}
}
}
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>
ConfirmDialog width can be adjusted per screen size with the breakpoints option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
<ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"></ConfirmDialog>
ConfirmDialog can be customized with various options listed here.
| Name | Type | Default | Description |
|---|---|---|---|
| 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. |
| icon | string | null | Icon to display next to the message. |
| header | string | null | Header text of the dialog. |
| position | string | center | Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright". |
| accept | Function | null | Callback to execute when action is confirmed. |
| reject | Function | null | Callback to execute when action is rejected. |
| onShow | Function | null | Callback to execute when dialog is shown. |
| onHide | Function | null | Callback to execute when dialog is hidden. |
| acceptLabel | string | null | Label of the accept button. Defaults to PrimeVue |
| rejectLabel | string | null | Label of the reject button. Defaults to PrimeVue |
| 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. |
| blockScroll | boolean | true | Whether background scroll should be blocked when dialog is visible. |
| defaultFocus | string | accept | Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject". |
| Name | Parameters | Description |
|---|---|---|
| require | confirm: Confirmation Object | Displays the dialog using the confirmation object options. |
| close | - | Hides the dialog without invoking accept or reject callbacks. |
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| 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 | object | null | Object literal to define widths per screen size. |
| Name | Parameters |
|---|---|
| message | - |
ConfirmDialog inherits all the classes from the Dialog component, visit
| Name | Element |
|---|---|
| p-confirm-dialog | Container element. |
| p-confirm-dialog-message | Container of message. |
| p-confirm-dialog-icon | Icon container inside content. |
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>
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;
}
});
};
return { isVisible, openDialog};
}
| 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. |
| Key | Function |
|---|---|
| enter | Closes the dialog. |
| space | Closes the dialog. |
None.