React ConfirmPopup

React ConfirmPopup displays a confirmation overlay displayed relatively to its target.

Setup

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

Import

import { ConfirmPopup } from 'primereact/confirmpopup'; // To use <ConfirmPopup> tag
import { confirmPopup } from 'primereact/confirmpopup'; // To use confirmPopup method

Getting Started

There are two ways to display confirm popup. One of them is to use the confirmPopup method and the other is to use the tag. These independently create popup element. It supports the same properties in both. target property is mandatory to align the popup to its caller.

1. confirmPopup method

const confirm = (event) => {
    confirmPopup({
        target: event.currentTarget,
        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

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

<ConfirmPopup target={document.getElementById('button')} visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?"
    icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />

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

Theming

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

Resources

Visit the PrimeReact ConfirmPopup showcase for demos and documentation.