ConfirmPopup

ConfirmPopup uses a Dialog UI

basic-demo

Usage#

import { ConfirmPopup } from '@primereact/ui/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>

Examples#

Template#

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.

template-demo

import { Check } from '@primeicons/react/check';
import { ExclemationCircle } from '@primeicons/react/exclemation-circle';
import { Times } from '@primeicons/react/times';
import { ConfirmPopup } from '@primereact/ui/confirmpopup';

export default function TemplateDemo() {
    return (
        <div className="flex justify-center">
            <ConfirmPopup.Root>
                <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">
                            <ExclemationCircle className="text-6xl text-primary-500"></ExclemationCircle>
                            <p>Please confirm to proceed moving forward.</p>
                        </div>
                    </ConfirmPopup.Content>
                    <ConfirmPopup.Footer>
                        <ConfirmPopup.Reject variant="outlined">
                            <Times />
                            Cancel
                        </ConfirmPopup.Reject>
                        <ConfirmPopup.Accept>
                            <Check />
                            Confirm
                        </ConfirmPopup.Accept>
                    </ConfirmPopup.Footer>
                </ConfirmPopup.Portal>
            </ConfirmPopup.Root>
        </div>
    );
}

Accessibility#

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

Overlay Keyboard Support#

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.

Close Button 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.