ConfirmPopup displays a confirmation overlay displayed relatively to its target.
import { ConfirmPopupModule } from 'primeng/confirmpopup';
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>
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.
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. |
Name | Parameters |
---|---|
accepticon | - |
rejecticon | - |
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. |
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". |