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 #

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.

ConfirmPopup #

ConfirmPopup displays a confirmation overlay displayed relatively to its target.

Properties #

Defines the input properties of the component.

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.
defaultFocus	string	accept	Element to receive the focus when the popup gets visible, valid values are "accept", "reject", and "none".
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	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
visible	any	null	Defines if the component is visible.

Templates #

Defines the templates used by the component.

name	parameters	description
rejecticon	-	Custom template of rejecticon.
accepticon	-	Custom template of accepticon.

Interfaces #

Defines the custom interfaces used by the module.

Confirmation #

Represents a confirmation dialog configuration.

name	type	description
message	string	The message to be displayed in the confirmation dialog.
key	string	A unique key to identify the confirmation dialog.
icon	string	The name of the icon to be displayed in the confirmation dialog.
header	string	The header text of the confirmation dialog.
accept	Function	The callback function to be executed when the accept button is clicked.
reject	Function	The callback function to be executed when the reject button is clicked.
acceptLabel	string	The label text for the accept button.
rejectLabel	string	The label text for the reject button.
acceptIcon	string	The name of the icon to be displayed on the accept button.
rejectIcon	string	The name of the icon to be displayed on the reject button.
acceptVisible	boolean	Specifies whether the accept button should be visible.
rejectVisible	boolean	Specifies whether the reject button should be visible.
blockScroll	boolean	Specifies whether to block scrolling on the page when the confirmation dialog is displayed.
closeOnEscape	boolean	Specifies whether the confirmation dialog should be closed when the escape key is pressed.
dismissableMask	boolean	Specifies whether clicking outside the confirmation dialog should dismiss it.
defaultFocus	string	The ID or class name of the element to receive focus by default when the confirmation dialog is opened.
acceptButtonStyleClass	string	The CSS class name to be applied to the accept button.
rejectButtonStyleClass	string	The CSS class name to be applied to the reject button.
target	EventTarget	The target event where the confirmation dialog is triggered from.
acceptEvent	EventEmitter<any>	An event emitter for the accept event.
rejectEvent	EventEmitter<any>	An event emitter for the reject event.

ConfirmationService #

Defines the service used by the component

Methods #

Methods used in service.

name	parameters	description
confirm	confirmation : Confirmation	Callback to invoke on confirm.
close	-	Closes the dialog.
onAccept	-	Accepts the dialog.