ConfirmDialog

An unstyled confirmation dialog component with icon, message, and action button composition.

Build fully custom confirmation dialogs with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use ConfirmDialog with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Trigger, Portal, Backdrop, Positioner, Popup, Header, Title, HeaderActions, Close, Content, Icon, Message, Footer
Nine position modes: center, top, bottom, left, right, topleft, topright, bottomleft, bottomright
Integrated focus trap with automatic focus management on open and close
Dismissable Backdrop with click-outside detection
Dedicated Icon and Message sub-components for structured confirmation content

Usage#

import { ConfirmDialog } from 'primereact/confirmdialog';

<ConfirmDialog.Root>
    <ConfirmDialog.Trigger></ConfirmDialog.Trigger>
    <ConfirmDialog.Portal>
        <ConfirmDialog.Backdrop />
        <ConfirmDialog.Positioner>
            <ConfirmDialog.Popup>
                <ConfirmDialog.Header>
                    <ConfirmDialog.Title></ConfirmDialog.Title>
                    <ConfirmDialog.Close></ConfirmDialog.Close>
                </ConfirmDialog.Header>
                <ConfirmDialog.Content>
                    <ConfirmDialog.Icon />
                    <ConfirmDialog.Message></ConfirmDialog.Message>
                </ConfirmDialog.Content>
                <ConfirmDialog.Footer>
                    <ConfirmDialog.Close></ConfirmDialog.Close>
                    <ConfirmDialog.Close></ConfirmDialog.Close>
                </ConfirmDialog.Footer>
            </ConfirmDialog.Popup>
        </ConfirmDialog.Positioner>
    </ConfirmDialog.Portal>
</ConfirmDialog.Root>

Behavior#

Motion Animation#

<ConfirmDialog.Popup motionProps={{ name: 'p-confirmdialog', appear: true }}>...</ConfirmDialog.Popup>

See Motion for animation phases, CSS variables, and hide strategies.

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<ConfirmDialog.Trigger as="div">...</ConfirmDialog.Trigger>
<ConfirmDialog.Icon as="i">...</ConfirmDialog.Icon>

Default elements: Root=div, Trigger=button, Positioner=div, Popup=div, Header=div, Title=div, Close=button, Content=div, Icon=span, Message=span, Footer=div.

Render Function Children#

Sub-components accept a render function as children, providing access to the component instance.

<ConfirmDialog.Content>{(instance) => <div>{instance.confirmdialog?.state.open ? 'Open' : 'Closed'}</div>}</ConfirmDialog.Content>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Edit Profile

Are you sure you want to proceed?

/* Select a part to see its CSS selector for custom styling */

API#

ConfirmDialogRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`open`	`boolean`	—
Specifies the visibility of the dialog.
`defaultOpen`	`boolean`	—
Specifies the default visibility of the dialog.
`draggable`	`boolean`	`true`
Enables dragging to change the position using header.
`keepInViewport`	`boolean`	`true`
Keeps dialog in the viewport.
`trapped`	`boolean`	`true`
When enabled, focus is trapped within the dialog (modal behavior).
`dismissable`	`boolean`	`false`
Specifies if clicking the modal background should hide the dialog.
`closeOnEscape`	`boolean`	`true`
Specifies if pressing escape key should hide the dialog.
`blockScroll`	`boolean`	`false`
Whether background scroll should be blocked when dialog is visible.
`baseZIndex`	`number`	`0`
Base zIndex value to use in layering.
`autoZIndex`	`boolean`	`true`
Whether to automatically manage layering.
`appendTo`	`"body"` \| `HTMLElement` \| `"self"`	`body`
A valid query selector or an HTMLElement to specify where the dialog gets attached.
`position`	`"center"` \| `"top"` \| `"bottom"` \| `"left"` \| `"right"` \| `"topleft"` \| `"topright"` \| `"bottomleft"` \| `"bottomright"`	`center`
Position of the dialog.
`fullScreen`	`boolean`	`false`
Whether the dialog should open in full screen (maximized) mode.
`onOpenChange`	`(event: ConfirmDialogRootChangeEvent) => void`	—
Callback function that is called when the trigger is clicked.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-open`	Present when the dialog is open
`data-closed`	Present when the dialog is closed

Defines passthrough(pt) options of ConfirmDialog component.

label	type	description
root	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
backdrop	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the backdrop's DOM element.
mask	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the mask's DOM element.
trigger	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the trigger's DOM element.
triggerIcon	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the trigger icon's DOM element.
header	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the header's DOM element.
title	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the title's DOM element.
headerActions	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the headerActions's DOM element.
close	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the close's DOM element.
closeIcon	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the close icon's DOM element.
content	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.
icon	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the icon's DOM element.
message	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the message's DOM element.
footer	ConfirmDialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the footer's DOM element.

ConfirmDialogTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogTriggerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogTriggerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-open`	Present when the dialog is open
`data-closed`	Present when the dialog is closed

Defines passthrough(pt) options of ConfirmDialogTrigger component.

label	type	description
root	ConfirmDialogTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogPortal#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogPortalInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogPortalInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogPortalInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogPortalPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogPortalInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ConfirmDialogPortal component.

label	type	description
root	ConfirmDialogPortalPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogBackdrop#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogBackdropInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogBackdropInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogBackdropInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogBackdropPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogBackdropInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Uses the Backdrop component internally for animated overlay rendering.

Defines passthrough(pt) options of ConfirmDialogBackdrop component.

label	type	description
root	ConfirmDialogBackdropPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogPositioner#

Attribute	Value
`data-position`	`"center"` \| `"top"` \| `"bottom"` \| `"left"` \| `"right"` \| `"topleft"` \| `"topright"` \| `"bottomleft"` \| `"bottomright"`
`data-scroll-behavior`	`"inside"` \| `"outside"`
`data-open`	Present when the dialog is open
`data-closed`	Present when the dialog is closed

ConfirmDialogPopup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogPopupInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogPopupInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogPopupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogPopupPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogPopupInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-open`	Present when the dialog is open

Uses VisuallyHidden elements internally for focus trap boundaries.

Defines passthrough(pt) options of ConfirmDialogPopup component.

label	type	description
root	ConfirmDialogPopupPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogHeader#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogHeaderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogHeaderInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogHeaderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogHeaderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogHeaderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ConfirmDialogHeader component.

label	type	description
root	ConfirmDialogHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogTitle#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogTitleInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogTitleInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogTitleInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogTitlePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogTitleInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ConfirmDialogTitle component.

label	type	description
root	ConfirmDialogTitlePassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogHeaderActions#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogHeaderActionsInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogHeaderActionsInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogHeaderActionsInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogHeaderActionsPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogHeaderActionsInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ConfirmDialogHeaderActions component.

label	type	description
root	ConfirmDialogHeaderActionsPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogClose#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogCloseInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogCloseInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogCloseInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogClosePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogCloseInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`iconOnly`	`boolean`	`true`
Whether to show the ConfirmDialogClose with a borderless style.
`severity`	`string & {}` \| `"secondary"` \| `"info"` \| `"success"` \| `"warn"` \| `"danger"` \| `"contrast"` \| `"help"`	`'secondary'`
Severity type of the ConfirmDialogClose.
`variant`	`"link"` \| `"text"` \| `"outlined"`	`'text'`
Variant of the ConfirmDialogClose.
`rounded`	`boolean`	`true`
Whether to show the ConfirmDialogClose with a rounded style.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ConfirmDialogClose component.

label	type	description
root	ConfirmDialogClosePassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogContentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ConfirmDialogContent component.

label	type	description
root	ConfirmDialogContentPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogIcon#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogIconInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogIconInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogIconInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogIconPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogIconInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ConfirmDialogIcon component.

label	type	description
root	ConfirmDialogIconPassThroughType<HTMLAttributes<HTMLLegendElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogMessage#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogMessageInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogMessageInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogMessageInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogMessagePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogMessageInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ConfirmDialogMessage component.

label	type	description
root	ConfirmDialogMessagePassThroughType<HTMLAttributes<HTMLLegendElement>>	Used to pass attributes to the root's DOM element.

ConfirmDialogFooter#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmDialogFooterInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmDialogFooterInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ConfirmDialogFooterInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmDialogFooterPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ConfirmDialogFooterInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ConfirmDialogFooter component.

label	type	description
root	ConfirmDialogFooterPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

ConfirmDialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so aria-labelledby can be used 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 indicate the dialog state.

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.