ConfirmDialog

ConfirmDialog is backed by a service utilizing Observables to display confirmation windows easily that can be shared by multiple actions on the same component.

Import #


import { ConfirmDialogModule } from 'primeng/confirmdialog';

Basic #

ConfirmDialog is defined using p-confirmDialog tag and an instance of ConfirmationService is required to display it bycalling confirm method.


<p-toast />
<p-confirmdialog />
<p-button (click)="confirm1($event)" label="Save" [outlined]="true" />
<p-button (click)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />

Position #

The position property of the confirm options is used to display a Dialog at all edges and corners of the screen.


<p-toast />
<p-confirmdialog key="positionDialog" [position]="position" />
<div class="flex flex-wrap justify-center gap-2 mb-4">
    <p-button (click)="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" styleClass="min-w-40" />
    <p-button (click)="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" styleClass="min-w-40" />
</div>
<div class="flex flex-wrap justify-center gap-2 mb-4">
    <p-button (click)="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" severity="secondary" styleClass="min-w-40" />
    <p-button (click)="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" styleClass="min-w-40" />
    <p-button (click)="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" severity="secondary" styleClass="min-w-40" />
</div>
<div class="flex flex-wrap justify-center gap-2">
    <p-button (click)="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" severity="secondary" styleClass="min-w-40" />
    <p-button (click)="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" styleClass="min-w-40" />
    <p-button (click)="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" severity="secondary" styleClass="min-w-40" />
</div>

Template #

Properties of the dialog are defined in two ways, message, icon, header properties can either be defined using confirm method or declaratively on p-confirmDialog ng-template by header, message, icon and footer templates. If these values are unlikely to change then declarative approach would be useful, still properties defined in a ng-template can be overridden with confirm method call.

In addition, buttons at footer section can be customized by passing your own UI, important note to make confirmation work with a custom UI is defining a local ng-template variable for the dialog and assign accept()-reject() methods to your own buttons.


<p-toast />
<p-confirmdialog>
    <ng-template #message let-message>
        <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
            <i [ngClass]="message.icon" class="!text-6xl text-primary-500"></i>
            <p>{{ message.message }}</p>
        </div>
    </ng-template>
</p-confirmdialog>
<p-button (click)="confirm()" label="Save" />

Headless #

Headless mode allows you to customize the entire user interface instead of the default elements.


<p-toast />
<p-confirmdialog #cd>
    <ng-template #headless let-message let-onAccept="onAccept" let-onReject="onReject">
        <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
            <div
                class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20"
            >
                <i class="pi pi-question !text-5xl"></i>
            </div>
            <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
            <p class="mb-0">{{ message.message }}</p>
            <div class="flex items-center gap-2 mt-6">
                <p-button label="Save" (onClick)="onAccept()" styleClass="w-32"></p-button>
                <p-button label="Cancel" [outlined]="true" (onClick)="onReject()" styleClass="w-32"></p-button>
            </div>
        </div>
    </ng-template>
</p-confirmdialog>
<p-button (click)="confirm()" label="Save"/>

Accessibility #

Screen Reader

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.

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.

When confirm function 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 popup is defined.


confirm1() {
this.confirmationService.confirm({
    message: 'Are you sure that you want to proceed?',
    header: 'Confirmation',
    icon: 'pi pi-exclamation-triangle',
    accept: () => acceptFunc(),
    reject: () => rejectFunc()
});

<p-button (click)="confirm1()" icon="pi pi-check" label="Confirm" />

<p-confirmdialog />

If the dialog is controlled with the visible property aria-expanded and aria-controls need to be handled explicitly.


<p-confirmdialog id="dialog" [visible]="visible" (onHide)="visible = false" message="Are you sure you want to proceed?" header="Confirmation" icon="pi pi-exclamation-triangle" />

<p-button (click)="visible = true" icon="pi pi-check" label="Confirm" aria-controls="{{visible ? 'dialog' : null}} aria-expanded="{{visible ? true : false}}" />

Overlay Keyboard Support

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.

name	type	default	description
header	string	null	Title text of the dialog.
icon	string	null	Icon to display next to message.
message	string	null	Message of the confirmation.
style	Object	null	Inline style of the element.
styleClass	string	null	Class of the element.
maskStyleClass	string	null	Specify the CSS class(es) for styling the mask element
acceptIcon	string	null	Icon of the accept button.
acceptLabel	string	null	Label of the accept button.
closeAriaLabel	string	null	Defines a string that labels the close button for accessibility.
acceptAriaLabel	string	null	Defines a string that labels the accept button for accessibility.
acceptVisible	boolean	true	Visibility of the accept button.
rejectIcon	string	null	Icon of the reject button.
rejectLabel	string	null	Label of the reject button.
rejectAriaLabel	string	null	Defines a string that labels the reject button for accessibility.
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.
closeOnEscape	boolean	true	Specifies if pressing escape key should hide the dialog.
dismissableMask	boolean	false	Specifies if clicking the modal background should hide the dialog.
blockScroll	boolean	true	Determines whether scrolling behavior should be blocked within the component.
rtl	boolean	false	When enabled dialog is displayed in RTL direction.
closable	boolean	true	Adds a close icon to the header to hide the dialog.
appendTo	any	body	Target element to attach the dialog, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
key	string	null	Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs.
autoZIndex	boolean	true	Whether to automatically manage layering.
baseZIndex	number	0	Base zIndex value to use in layering.
transitionOptions	string	150ms cubic-bezier(0, 0, 0.2, 1)	Transition options of the animation.
focusTrap	boolean	true	When enabled, can only focus on elements inside the confirm dialog.
defaultFocus	"accept" \| "reject" \| "none" \| "close"	accept	Element to receive the focus when the dialog gets visible.
breakpoints	any	null	Object literal to define widths per screen size.
visible	any	null	Current visible state as a boolean.
position	string	null	Allows getting the position of the component.

name	parameters	description
header		Custom template of header.
footer		Custom template of footer.
message	context : { $implicit: any, // undefined }	Custom template of message.
icon		Custom template of icon.
rejecticon		Custom template of rejecticon.
accepticon		Custom template of accepticon.
headless	context : { $implicit: any, // undefined }	Headless template.

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.
acceptButtonProps	any
rejectButtonProps	any
closeButtonProps	any
closable	boolean
position	string

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

class	description
p-confirmdialog	Class name of the root element
p-confirmdialog-icon	Class name of the icon element
p-confirmdialog-message	Class name of the message element
p-confirmdialog-reject-button	Class name of the reject button element
p-confirmdialog-accept-button	Class name of the accept button element

ConfirmDialog

Import #

Basic #

Position #

Template #

Headless #

Accessibility #

Screen Reader

Overlay Keyboard Support

Buttons Keyboard Support

ConfirmDialog API

ConfirmDialog #

Properties #

Emitters #

Templates #

Interfaces #

Confirmation #

ConfirmationService #

Methods #

ConfirmDialog Theming

CSS Classes #

ConfirmDialog Design Tokens #

token	variable	description
confirmdialog.icon.size	--p-confirmdialog-icon-size	Size of icon
confirmdialog.icon.color	--p-confirmdialog-icon-color	Color of icon
confirmdialog.content.gap	--p-confirmdialog-content-gap	Gap of content