ConfirmDialog is an easy to use and customizable Confirmation API using a dialog.
import { ConfirmDialog } from 'primereact/confirmdialog'; // For <ConfirmDialog /> component
import { confirmDialog } from 'primereact/confirmdialog'; // For confirmDialog method
A ConfirmDialog component needs to be present on the page that is interacted with the confirmDialog function that takes a configuration object for customization.
<Toast ref={toast} />
<ConfirmDialog />
<Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
<Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
The position property of the confirm options is used to display a Dialog at all edges and corners of the screen.
<Toast ref={toast} />
<ConfirmDialog />
<div className="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" onClick={() => confirm('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
<Button label="Right" icon="pi pi-arrow-left" onClick={() => confirm('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
</div>
<div className="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => confirm('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
<Button label="Top" icon="pi pi-arrow-down" onClick={() => confirm('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
<Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => confirm('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
</div>
<div className="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => confirm('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
<Button label="Bottom" icon="pi pi-arrow-up" onClick={() => confirm('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
<Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => confirm('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
</div>
Declarative is an alternative to the programmatic approach where ConfirmDialog is controlled with a binding to visible and onHide event callback.
<Toast ref={toast} />
<ConfirmDialog group="declarative" 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" />
Templating allows customizing the message content.
<Toast ref={toast} />
<ConfirmDialog group="templating" />
<div className="card flex justify-content-center">
<Button onClick={() => showTemplate()} icon="pi pi-check" label="Confirm"></Button>
</div>
ConfirmDialog width can be adjusted per screen size with the breakpoints option where a key defines the max-width for the breakpoint and value for the corresponding width. When no breakpoint matches width defined in style property is used.
<Toast ref={toast} />
<ConfirmDialog
group="declarative"
visible={visible}
onHide={() => setVisible(false)}
message="Are you sure you want to proceed?"
header="Confirmation"
icon="pi pi-exclamation-triangle"
accept={accept}
reject={reject}
style={{ width: '50vw' }}
breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
/>
<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
Headless mode is enabled by defining a content prop that lets you implement entire confirmation UI instead of the default elements.
<Toast ref={toast} />
<ConfirmDialog
group="headless"
content={({ headerRef, contentRef, footerRef, hide, message }) => (
<div className="flex flex-column align-items-center p-5 surface-overlay border-round">
<div className="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
<i className="pi pi-question text-5xl"></i>
</div>
<span className="font-bold text-2xl block mb-2 mt-4" ref={headerRef}>
{message.header}
</span>
<p className="mb-0" ref={contentRef}>
{message.message}
</p>
<div className="flex align-items-center gap-2 mt-4" ref={footerRef}>
<Button
label="Save"
onClick={(event) => {
hide(event);
accept();
}}
className="w-8rem"
></Button>
<Button
label="Cancel"
outlined
onClick={(event) => {
hide(event);
reject();
}}
className="w-8rem"
></Button>
</div>
</div>
)}
/>
<div className="card flex flex-wrap gap-2 justify-content-center">
<Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
</div>
ConfirmDialog component uses alertdialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. 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.
When confirm function is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined.
const confirm = (event) => {
confirmDialog({
trigger: 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>
<ConfirmDialog />
If the dialog is controlled with the visible property aria-expanded and aria-controls need to be handled explicitly.
<ConfirmDialog id="dlg_confirmation" 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" aria-controls={visible ? 'dlg_confirmation' : null} aria-expanded={visible ? true : false} />
| 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. |
| 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. |