useConfirmDialog

import { useMotion } from '@primereact/core/motion';
import { useConfirmDialog } from '@primereact/headless/confirmdialog';
import { usePortal } from '@primereact/headless/portal';
import * as React from 'react';
import { createPortal } from 'react-dom';

const { rootProps, triggerProps, backdropProps, positionerProps, popupProps, closeProps, headerProps, contentProps } = useConfirmDialog();
const portal = usePortal();
 
<div {...rootProps}>
    <button {...triggerProps}></button>
    {portal.state.mounted &&
        createPortal(
            <>
                <div {...backdropProps} />
                <div {...positionerProps}>
                    <div {...popupProps}>
                        <div {...headerProps}>
                            <button {...closeProps}></button>
                        </div>
                        <div {...contentProps}>...</div>
                    </div>
                </div>
            </>,
            document.body

const [isOpen, setIsOpen] = React.useState(false);
 
const confirmdialog = useConfirmDialog({
    open: isOpen,
    onOpenChange: (e) => setIsOpen(e.value)
});

const confirmdialog = useConfirmDialog();
 
const handleAccept = async () => {
    await deleteItem();
    confirmdialog.close();
};
 
<button onClick={handleAccept}>Yes</button>
<button {...confirmdialog.closeProps}>No</button>

const confirmdialog = useConfirmDialog({ position: 'top' });

const confirmdialog = useConfirmDialog({ baseZIndex: 1200, autoZIndex: true });

[data-scope='confirmdialog'][data-part='positioner'] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
[data-scope='confirmdialog'][data-part='positioner'][data-position='top'] {
    align-items: flex-start;
}