Source: https://primereact.org/confirmpopup/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

ConfirmPopup

ConfirmPopup is an easy to use and customizable Confirmation API using a popover.

Import#

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

Copy

Basic#

A ConfirmPopup component needs to be present on the page that is interacted with the confirmPopup function that takes a configuration object for customization. In order to align the popover, target property must be provided referring to the source element.

ConfirmDelete

<Toast ref={toast} />
<ConfirmPopup />
<div className="card flex flex-wrap gap-2 justify-content-center">
    <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
    <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
</div>

Copy

Declarative#

Declarative is an alternative to the programmatic approach where ConfirmDialog is controlled with a binding to visible and onHide event callback along with the target property to refer to the source element.

Confirm

<Toast ref={toast} />
<ConfirmPopup target={buttonEl.current} visible={visible} onHide={() => setVisible(false)} 
    message="Are you sure you want to proceed?" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
<Button ref={buttonEl} onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />

Copy

Template#

Templating allows customizing the message content.

Confirm

<Toast ref={toast} />
<ConfirmPopup group="templating" />
<div className="card flex justify-content-center">
    <Button onClick={showTemplate} icon="pi pi-check" label="Confirm"></Button>
</div>

Copy

Headless#

Headless mode is enabled by defining a content prop that lets you implement entire confirmation UI instead of the default elements.

ConfirmDelete

<Toast ref={toast} />
<ConfirmPopup
    group="headless"
    content={({message, acceptBtnRef, rejectBtnRef, hide}) => 
        <div className="bg-gray-900 text-white border-round p-3">
            <span>{message}</span>
            <div className="flex align-items-center gap-2 mt-3">
                <Button ref={acceptBtnRef} label="Save" onClick={() => {accept(); hide();}} className="p-button-sm p-button-outlined"></Button>
                <Button ref={rejectBtnRef} label="Cancel" outlined onClick={() => {reject(); hide();}}className="p-button-sm p-button-text"></Button>
            </div>
        </div>
    }
/>
<div className="card flex flex-wrap gap-2 justify-content-center">
    <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
    <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
</div>

Copy

Accessibility#

Screen Reader

ConfirmPopup component uses alertdialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition aria-modal is added since focus is kept within the popup.

It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. ConfirmPopup adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined.

Overlay Keyboard Support

When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup.

| Key | Function | | --- | --- | | tab | Moves focus to the next the focusable element within the popup. | | shift + tab | Moves focus to the previous the focusable element within the popup. | | escape | Closes the popup and moves focus to the trigger. |

Buttons Keyboard Support

| Key | Function | | --- | --- | | enter | Triggers the action, closes the popup and moves focus to the trigger. | | space | Triggers the action, closes the popup and moves focus to the trigger. |

Import
Basic
Declarative
Template
Headless
Accessibility

PrimeReact 10.9.7 by PrimeTek