ConfirmPopup uses a Dialog UI
import { ConfirmPopup } from 'primereact/confirmpopup';<ConfirmPopup>
<ConfirmPopup.Trigger />
<ConfirmPopup.Portal>
<ConfirmPopup.Content>
<ConfirmPopup.Icon />
<ConfirmPopup.Message />
</ConfirmPopup.Content>
<ConfirmPopup.Footer>
<ConfirmPopup.Reject />
<ConfirmPopup.Accept />
</ConfirmPopup.Footer>
</ConfirmPopup.Portal>
</ConfirmPopup>ConfirmPopup is defined using ConfirmPopup, ConfirmPopup.Trigger, ConfirmPopup.Portal, ConfirmPopup.Content, ConfirmPopup.Footer, ConfirmPopup.Reject and ConfirmPopup.Accept components.
import { ConfirmPopup } from 'primereact/confirmpopup';
export default function BasicDemo() {
return (
<div className="card flex flex-wrap gap-2 justify-center">
<ConfirmPopup>
<ConfirmPopup.Trigger variant="outlined">Save</ConfirmPopup.Trigger>
<ConfirmPopup.Portal>
<ConfirmPopup.Content>
<ConfirmPopup.Icon className="pi pi-exclamation-triangle" />
<ConfirmPopup.Message>Are you sure you want to proceed?</ConfirmPopup.Message>
</ConfirmPopup.Content>
<ConfirmPopup.Footer>
<ConfirmPopup.Reject severity="secondary" variant="outlined">
Cancel
</ConfirmPopup.Reject>
<ConfirmPopup.Accept>Save</ConfirmPopup.Accept>
</ConfirmPopup.Footer>
</ConfirmPopup.Portal>
</ConfirmPopup>
<ConfirmPopup>
<ConfirmPopup.Trigger severity="danger" variant="outlined">
Delete
</ConfirmPopup.Trigger>
<ConfirmPopup.Portal>
<ConfirmPopup.Content>
<ConfirmPopup.Icon className="pi pi-info-circle" />
<ConfirmPopup.Message>Are you sure you want to proceed?</ConfirmPopup.Message>
</ConfirmPopup.Content>
<ConfirmPopup.Footer>
<ConfirmPopup.Reject severity="secondary" variant="outlined">
Cancel
</ConfirmPopup.Reject>
<ConfirmPopup.Accept severity="danger">Delete</ConfirmPopup.Accept>
</ConfirmPopup.Footer>
</ConfirmPopup.Portal>
</ConfirmPopup>
</div>
);
}ConfirmPopup can be customized with templates. The ConfirmPopup.Content can be used to define the content of the popup, while ConfirmPopup.Footer can be used to define the footer actions.
import { ConfirmPopup } from 'primereact/confirmpopup';
export default function TemplateDemo() {
return (
<div className="card flex justify-center">
<ConfirmPopup>
<ConfirmPopup.Trigger>Save</ConfirmPopup.Trigger>
<ConfirmPopup.Portal>
<ConfirmPopup.Content>
<div className="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
<i className="pi pi-exclamation-circle text-6xl text-primary-500"></i>
<p>Please confirm to proceed moving forward.</p>
</div>
</ConfirmPopup.Content>
<ConfirmPopup.Footer>
<ConfirmPopup.Reject variant="outlined">
<i className="pi pi-times" />
Cancel
</ConfirmPopup.Reject>
<ConfirmPopup.Accept>
<i className="pi pi-check" />
Confirm
</ConfirmPopup.Accept>
</ConfirmPopup.Footer>
</ConfirmPopup.Portal>
</ConfirmPopup>
</div>
);
}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.
| Key | Function |
|---|---|
tab | Moves focus to the next the focusable element within the confirmpopup. |
shift + tab | Moves focus to the previous the focusable element within the confirmpopup. |
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. |