ConfirmDialog

ConfirmDialog uses a Dialog UI

Usage#

import { ConfirmDialog } from 'primereact/confirmdialog';

<ConfirmDialog>
    <ConfirmDialog.Trigger />
    <ConfirmDialog.Portal>
        <ConfirmDialog.Header>
            <ConfirmDialog.Title />
            <ConfirmDialog.HeaderActions>
                <ConfirmDialog.Close />
            </ConfirmDialog.HeaderActions>
        </ConfirmDialog.Header>
        <ConfirmDialog.Content />
        <ConfirmDialog.Footer />
    </ConfirmDialog.Portal>
</ConfirmDialog>

Examples#

Basic#

ConfirmDialog is defined using ConfirmDialog, ConfirmDialog.Trigger, ConfirmDialog.Portal, ConfirmDialog.Header, ConfirmDialog.Content and ConfirmDialog.Footer components.

import { ConfirmDialog } from 'primereact/confirmdialog';
 
export default function BasicDemo() {
    return (
        <div className="card flex flex-wrap gap-2 justify-center">
            <ConfirmDialog>
                <ConfirmDialog.Trigger variant="outlined">Save</ConfirmDialog.Trigger>
                <ConfirmDialog.Portal>
                    <ConfirmDialog.Header>
                        <ConfirmDialog.Title>Edit Profile</ConfirmDialog.Title>
                        <ConfirmDialog.Close />
                    </ConfirmDialog.Header>
                    <ConfirmDialog.Content>
                        <ConfirmDialog.Icon className="pi pi-exclamation-triangle" />
                        <ConfirmDialog.Message>Are you sure you want to proceed?</ConfirmDialog.Message>
                    </ConfirmDialog.Content>
                    <ConfirmDialog.Footer>
                        <ConfirmDialog.Cancel variant="outlined">Cancel</ConfirmDialog.Cancel>
                        <ConfirmDialog.Action>Save</ConfirmDialog.Action>
                    </ConfirmDialog.Footer>
                </ConfirmDialog.Portal>
            </ConfirmDialog>
            <ConfirmDialog>
                <ConfirmDialog.Trigger severity="danger" variant="outlined">
                    Delete
                </ConfirmDialog.Trigger>
                <ConfirmDialog.Portal>
                    <ConfirmDialog.Header>
                        <ConfirmDialog.Title>Danger Zone</ConfirmDialog.Title>
                        <ConfirmDialog.Close />
                    </ConfirmDialog.Header>
                    <ConfirmDialog.Content>
                        <ConfirmDialog.Icon className="pi pi-exclamation-triangle" />
                        <ConfirmDialog.Message>Do you want to delete this record?</ConfirmDialog.Message>
                    </ConfirmDialog.Content>
                    <ConfirmDialog.Footer>
                        <ConfirmDialog.Cancel variant="outlined">Cancel</ConfirmDialog.Cancel>
                        <ConfirmDialog.Action severity="danger">Delete</ConfirmDialog.Action>
                    </ConfirmDialog.Footer>
                </ConfirmDialog.Portal>
            </ConfirmDialog>
        </div>
    );
}

Position#

The position of the confirmdialog can be customized with the position property. The available values are top, top-left, top-right, bottom, bottom-left, bottom-right, left, right, and center.

import { ConfirmDialogChangeEvent, ConfirmDialogProps } from '@primereact/types/shared/confirmdialog';
import { Button } from 'primereact/button';
import { ConfirmDialog } from 'primereact/confirmdialog';
import * as React from 'react';
 
export default function PositionDemo() {
    const [open, setOpen] = React.useState<boolean>(false);
    const [position, setPosition] = React.useState<ConfirmDialogProps['position']>('center');
 
    const openPosition = (position: ConfirmDialogProps['position']) => {
        setOpen(true);
        setPosition(position);
    };
 
    return (
        <div className="card">
            <div className="flex flex-wrap justify-center gap-2 mb-2">
                <Button onClick={() => openPosition('left')} severity="secondary" style={{ minWidth: '10rem' }}>
                    Left
                    <i className="pi pi-arrow-right" />
                </Button>
                <Button onClick={() => openPosition('right')} severity="secondary" style={{ minWidth: '10rem' }}>
                    Right
                    <i className="pi pi-arrow-left" />
                </Button>
            </div>
            <div className="flex flex-wrap justify-center gap-2 mb-2">
                <Button onClick={() => openPosition('topleft')} severity="secondary" style={{ minWidth: '10rem' }}>
                    TopLeft
                    <i className="pi pi-arrow-down-right" />
                </Button>
                <Button onClick={() => openPosition('top')} severity="secondary" style={{ minWidth: '10rem' }}>
                    Top
                    <i className="pi pi-arrow-down" />
                </Button>
                <Button onClick={() => openPosition('topright')} severity="secondary" style={{ minWidth: '10rem' }}>
                    TopRight
                    <i className="pi pi-arrow-down-left" />
                </Button>
            </div>
            <div className="flex flex-wrap justify-center gap-2">
                <Button onClick={() => openPosition('bottomleft')} severity="secondary" style={{ minWidth: '10rem' }}>
                    BottomLeft
                    <i className="pi pi-arrow-up-right" />
                </Button>
                <Button onClick={() => openPosition('bottom')} severity="secondary" style={{ minWidth: '10rem' }}>
                    Bottom
                    <i className="pi pi-arrow-up" />
                </Button>
                <Button onClick={() => openPosition('bottomright')} severity="secondary" style={{ minWidth: '10rem' }}>
                    BottomRight
                    <i className="pi pi-arrow-up-left" />
                </Button>
            </div>
            <ConfirmDialog open={open} onOpenChange={(e: ConfirmDialogChangeEvent) => setOpen(e.value as boolean)} position={position}>
                <ConfirmDialog.Portal>
                    <ConfirmDialog.Header>
                        <ConfirmDialog.Title>Edit Profile</ConfirmDialog.Title>
                        <ConfirmDialog.Close />
                    </ConfirmDialog.Header>
                    <ConfirmDialog.Content>
                        <ConfirmDialog.Icon className="pi pi-exclamation-triangle" />
                        <ConfirmDialog.Message>Are you sure you want to proceed?</ConfirmDialog.Message>
                    </ConfirmDialog.Content>
                    <ConfirmDialog.Footer>
                        <ConfirmDialog.Cancel>Cancel</ConfirmDialog.Cancel>
                        <ConfirmDialog.Action>Save</ConfirmDialog.Action>
                    </ConfirmDialog.Footer>
                </ConfirmDialog.Portal>
            </ConfirmDialog>
        </div>
    );
}

Accessibility#

ConfirmDialog component uses confirmdialog 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.

Trigger element also has aria-expanded and aria-controls to be handled explicitly.

Overlay Keyboard Support#

Key	Function
`tab`	Moves focus to the next the focusable element within the confirmdialog if `modal` is true. Otherwise, the focusable element in the page tab sequence.
`shift + tab`	Moves focus to the previous the focusable element within the confirmdialog if `modal` is true. Otherwise, the focusable element in the page tab sequence.
`escape`	Closes the confirmdialog if `closeOnEscape` is true.

Close Button Keyboard Support#

Key	Function
`enter`	Closes the confirmdialog.
`space`	Closes the confirmdialog.

On this page

Usage
Examples
Basic
Position
Accessibility
Screen Reader
Overlay Keyboard Support
Close Button Keyboard Support