ConfirmPopup

ConfirmPopup displays a confirmation overlay displayed relatively to its target.

Import #


import { ConfirmPopupModule } from 'primeng/confirmpopup';

Basic #

ConfirmDialog is defined using p-confirmDialog 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)="confirm($event)" icon="pi pi-check" label="Confirm"></p-button>

Style #

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.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.

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.

Overlay Keyboard Support

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.

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.

ConfirmPopup API

API defines helper props, events and others for the PrimeNG ConfirmPopup module.

Properties #

Name	Type	Default	Description
key	string	null	Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs.
showTransitionOptions	string	.12s cubic-bezier(0, 0, 0.2, 1)	Transition options of the show animation.
hideTransitionOptions	string	.1s linear	Transition options of the hide animation.
autoZIndex	boolean	true	Whether to automatically manage layering.
baseZIndex	number	0	Base zIndex value to use in layering.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.

Templates #

Name	Parameters
accepticon	-
rejecticon	-

Confirmation Service #

Name	Parameters	Description
confirm	confirm: Confirmation Object	Displays the dialog using the confirmation object options.
close	-	Hides the dialog without invoking accept or reject callbacks.

Confirmation API #

Name	Type	Default	Description
message	string	null	Message of the confirmation.
key	string	null	Optional key to match the key of the confirm popup, necessary to use when component tree has multiple confirm popups.
icon	string	null	Icon to display next to the message.
accept	Function	null	Callback to execute when action is confirmed.
reject	Function	null	Callback to execute when action is rejected.
acceptLabel	string	null	Label of the accept button.
rejectLabel	string	null	Label of the reject button.
acceptIcon	string	null	Icon of the accept button.
rejectIcon	string	null	Icon of the reject button.
acceptVisible	boolean	true	Visibility of the accept button.
rejectVisible	boolean	true	Visibility of the reject button.
acceptButtonStyleClass	string	null	Style class of the accept button.
rejectButtonStyleClass	string	null	Style class of the reject button.
defaultFocus	string	accept	Element to receive the focus when the popup gets visible, valid values are "accept", "reject", and "none".