React ConfirmDialog

React ConfirmDialog uses a Dialog UI with confirmDialog method or tag.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

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

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 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>

2. 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" />

Theming

ConfirmDialog supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact ConfirmDialog showcase for demos and documentation.