There are two ways to provide the header, message, and icons for the confirmed Dialog. One is a declarative approach in which all the features are provided through attributes (header, message, and icon), whereas the other approach is a programmatic approach in which the values can be dynamic through confirmed instance properties. Even the footer section buttons can be customized with their own UI (acceptLabel, acceptIcon, acceptVisibility, rejectLabel, rejectIcon, and rejectVisibility) along with the accept and reject methods of the local ng-template variable.

A customized example of the confirm Dialog component with header and footer would be written as follows:

<p-confirmDialog header="Confirmation" message="Do you like to use  
  DataTable component" icon="fa fa-question-circle" width="400" 
  height="200" #confirmation>
  <p-footer>
    <button type="button" pButton icon="fa-close" label="No" 
    (click)="confirmation.reject()"></button>
    <button type="button" pButton icon="fa-check" label="Yes" 
    (click)="confirmation.accept()"></button>
  </p-footer>
</p-confirmDialog>

The following screenshot shows a snapshot result of a custom confirm Dialog example:

In the preceding snapshot, all headers, messages, and icons are customized in a declarative approach. The confirm Dialog provides default closable, responsive, and closeOnEscape properties, which is similar to the Dialog component.