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 { ConfirmDialogModule } from 'primeng/confirmdialog';

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 (onClick)="confirm1($event)" label="Save" [outlined]="true" />
<p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />

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" 
    rejectButtonStyleClass="p-button-outlined" />

<div class="flex flex-wrap justify-content-center gap-2">
    <p-button 
        (click)="confirmPosition('left')" 
        icon="pi pi-arrow-right" 
        label="Left" 
        severity="secondary" />
    <p-button 
        (click)="confirmPosition('right')" 
        icon="pi pi-arrow-left" 
        label="Right" 
        severity="secondary" />
</div>
<div class="flex flex-wrap justify-content-center gap-2">
    <p-button 
        (click)="confirmPosition('top-left')" 
        icon="pi pi-arrow-down" 
        label="TopLeft" 
        severity="secondary" />
    <p-button 
        (click)="confirmPosition('top')" 
        icon="pi pi-arrow-down" 
        label="Top" 
        severity="secondary" />
    <p-button 
        (click)="confirmPosition('top-right')" 
        icon="pi pi-arrow-down" 
        label="TopRight" 
        severity="secondary" />
</div>
<div class="flex flex-wrap justify-content-center gap-2">
    <p-button 
        (click)="confirmPosition('bottom-left')" 
        icon="pi pi-arrow-up" 
        label="BottomLeft" 
        severity="secondary" />
    <p-button 
        (click)="confirmPosition('bottom')" 
        icon="pi pi-arrow-up" 
        label="Bottom" 
        severity="secondary" />
    <p-button 
        (click)="confirmPosition('bottom-right')" 
        icon="pi pi-arrow-up" 
        label="BottomRight" 
        severity="secondary" />
</div>

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 pTemplate="message" let-message>
        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
            <i class="pi pi-exclamation-circle text-6xl text-primary-500"></i>
            <p>{{ message.message }}</p>
        </div>
    </ng-template>
</p-confirmDialog>
<p-button (onClick)="confirm()" label="Save" />

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


<p-toast />
<p-confirmDialog #cd>
    <ng-template pTemplate="headless" let-message>
        <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
            <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem">
                <i class="pi pi-question text-5xl"></i>
            </div>
            <span class="font-bold text-2xl block mb-2 mt-4">
                {{ message.header }}
            </span>
            <p class="mb-0">{{ message.message }}</p>
            <div class="flex align-items-center gap-2 mt-4">
                <button 
                    pButton 
                    label="Save" 
                    (click)="cd.accept()" 
                    class="w-8rem">
                </button>
                <button 
                    pButton 
                    label="Cancel" 
                    (click)="cd.reject()" 
                    class="p-button-outlined w-8rem ">
                </button>
            </div>
        </div>
    </ng-template>
</p-confirmDialog>
<p-button (onClick)="confirm()" icon="pi pi-check" label="Confirm" />

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-dialogContainer element
p-confirmdialogContainer element
p-dialog-titlebarContainer of header.
p-dialog-titleHeader element.
p-dialog-titlebar-iconIcon container inside header.
p-dialog-titlebar-closeClose icon element.
p-dialog-contentContent element.

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 (onClick)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>

<p-confirmDialog></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-confirmDialog>

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

Overlay Keyboard Support

KeyFunction
tabMoves focus to the next the focusable element within the popup.
shift + tabMoves focus to the previous the focusable element within the popup.
escapeCloses the popup and moves focus to the trigger.

Buttons Keyboard Support

KeyFunction
enterTriggers the action, closes the popup and moves focus to the trigger.
spaceTriggers the action, closes the popup and moves focus to the trigger.