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" 
						yesButtonLabel="Delete Me!"
						yesButtonClass="bg-red-600 text-white" 
						yesButtonIcon="pi pi-trash"
						noButtonLabel="Keep this!"
						noButtonClass="bg-green-600 text-white" 
						noButtonIcon="pi pi-heart"/>
				</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" icon="pi pi-times"/>
            <p:commandButton value="Yes" type="button" styleClass="ui-confirm-popup-yes" icon="pi pi-check"/>
        </p:confirmPopup>
    </h:form>
</div>