ConfirmDialog

ConfirmDialog uses a Dialog UI with confirmDialog method or <ConfirmDialog> tag.

Basic

Position

Using ConfirmDialog tag

Import via Module


import { ConfirmDialog } from 'primereact/confirmdialog'; // To use <ConfirmDialog> tag
import { confirmDialog } from 'primereact/confirmdialog'; // To use confirmDialog method

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/confirmdialog/confirmdialog.min.js"></script>

Getting Started

There are two ways to display confirm dialog. One of them is to use the confirmDialog method and the other is to use the <ConfirmDialog> tag. These independently create dialog element. It supports the same properties in both.

1. confirmDialog method


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

<Button onClick={confirm} icon="pi pi-check" label="Confirm"></Button>
<ConfirmDialog /> <!--required empty dialog tag -->

2. <ConfirmDialog> tag

ConfirmDialog is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state.


<ConfirmDialog visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?"
    header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />

<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />

Responsive

ConfirmDialog width can be adjusted per screen size with the breakpoints option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.


<ConfirmDialog breakpoints={{'960px': '75vw', '640px': '100vw'}} style={{width: '50vw'}} ... />

Properties

These properties are extended from Dialog properties.

Name	Type	Default	Description
visible	boolean	false	Specifies the visibility of the confirm dialog.
message	string	null	Message of the confirmation.
icon	string	null	Icon to display next to the message.
acceptLabel	string	Yes	Label of the accept button.
rejectLabel	string	No	Label of the reject button.
acceptIcon	string	null	Icon of the accept button.
rejectIcon	string	null	Icon of the reject button.
acceptClassName	string	null	Style class of the accept button.
rejectClassName	string	null	Style class of the reject button.
footer	any	null	Footer content of the confirm dialog.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.

Events

Name	Parameters	Description
accept	null	Callback to execute when action is confirmed.
reject	null	Callback to execute when action is rejected.
onHide	result: Indicates with which selection the dialog was closed. Valid values are 'accept', 'reject' and undefined (using close icon).	Callback to invoke when confirm dialog is hidden.