Confirm Popup

<div class="card">
    <h:form>
        <p:growl id="message" showDetail="true"/>

        <p:commandButton value="Confirm" action="#{confirmView.confirm}" update="message" styleClass="mr-2" icon="pi pi-check">
            <p:confirm type="popup" header="Confirmation" message="Are you sure you want to proceed?" icon="pi pi-exclamation-triangle"/>
        </p:commandButton>

        <p:commandButton value="Delete" action="#{confirmView.delete}" update="message" styleClass="ui-button-danger mr-2" icon="pi pi-times">
            <p:confirm type="popup" header="Confirmation" message="Do you want to delete this record?" icon="pi pi-info-circle"/>
        </p:commandButton>
        
        <p:commandButton value="Non-Ajax" action="#{confirmView.nonAjax}" styleClass="ui-button-warning" icon="pi pi-question" ajax="false">
            <p:confirm type="popup" header="Confirmation" message="Submit this page and reload?" icon="pi pi-question-circle"/>
        </p:commandButton>

        <p:confirmPopup global="true">
            <p:commandButton value="No" type="button" styleClass="ui-confirm-popup-no ui-button-flat"/>
            <p:commandButton value="Yes" type="button" styleClass="ui-confirm-popup-yes" />
        </p:confirmPopup>
    </h:form>
</div>