ConfirmPopup displays a confirmation overlay displayed relatively to its target.
import { ConfirmPopupModule } from 'primeng/confirmpopup';
ConfirmPopup is defined using p-confirmPopup tag and an instance of ConfirmationService is required to display it bycalling confirm method.
<p-toast></p-toast>
<p-confirmPopup></p-confirmPopup>
<p-button (click)="confirm1($event)" icon="pi pi-check" label="Confirm"></p-button>
<p-button (click)="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></p-button>
Content section can be customized using content template.
<p-toast></p-toast>
<p-confirmPopup>
<ng-template pTemplate="content" let-message>
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
<i [class]="message.icon" class="text-6xl text-primary-500"></i>
<p>{{ message.message }}</p>
</div>
</ng-template>
</p-confirmPopup>
<p-button (click)="confirm($event)" icon="pi pi-check" label="Confirm"></p-button>
Headless mode allows you to customize the entire user interface instead of the default elements.
<p-toast></p-toast>
<p-confirmPopup #confirmPopupRef>
<ng-template pTemplate="headless" let-message let-test>
<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 (click)="accept()" pButton label="Save" class="p-button-sm p-button-outlined"></button>
<button (click)="reject()" pButton label="Cancel" class="p-button-sm p-button-text"></button>
</div>
</div>
</ng-template>
</p-confirmPopup>
<p-button (click)="confirm($event)" icon="pi pi-check" label="Confirm"></p-button>
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.
It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. ConfirmPopup adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined.
When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup.
| 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. |
API defines helper props, events and others for the PrimeNG ConfirmPopup module.
ConfirmPopup displays a confirmation overlay displayed relatively to its target.
Defines the input properties of the component.
Defines the templates used by the component.
Defines the custom interfaces used by the module.
Represents a confirmation dialog configuration.
Defines the service used by the component
Methods used in service.