ConfirmPopup

ConfirmPopup displays a confirmation overlay displayed relatively to its target.

Basic

Using ConfirmPopup tag

Import via Module


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

Import via CDN


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

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 <ConfirmPopup> 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?',
        icon: 'pi pi-exclamation-triangle',
        accept: () => acceptFunc(),
        reject: () => rejectFunc()
    });
}

<Button onClick={confirm} icon="pi pi-check" label="Confirm"></Button>

The confirmPopup method returns an object incudes hide and show methods. The component can be shown or hidden by using this object at any time.


const confirm = (event) => {
    const myConfirm = confirmPopup({
        target: event.currentTarget,
        message: 'Are you sure you want to proceed?',
        icon: 'pi pi-exclamation-triangle',
        accept: () => acceptFunc(),
        reject: () => rejectFunc()
    });

    setTimeout(() => {
        myConfirm.hide();

        setTimeout(() => {
            myConfirm.show();
        }, 1000);
    }, 500);
}

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

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

Properties

Name	Type	Default	Description
target	DomElement	null	Element to align the overlay. (Required)
visible	boolean	false	Specifies the visibility of the confirm popup.
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.
dismissable	boolean	true	Enables to hide the popup when outside is clicked.
footer	any	null	Footer content of the confirm popup.
appendTo	DOM element \| string	document.body	DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

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 popup was closed. Valid values are 'accept', 'reject' and undefined (outside click).	Callback to invoke when confirm popup is hidden.
onShow	-	Callback to invoke when overlay panel becomes visible.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-confirm-popup	Container element.
p-confirm-content	Content element.
p-confirm-popup-icon	Message icon.
p-confirm-popup-message	Message text.
p-confirm-popup-footer	Footer element for buttons.