ConfirmPopup

An unstyled confirm popup component with alertdialog role, focus management, and outside click dismissal.

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

basic-demo

Pre-styled Versions

Choose a pre-styled library to use ConfirmPopup 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, Positioner, Popup, Arrow, Content, Icon, Message, Footer, Close
Built-in alertdialog role on the popup element for confirmation semantics
Multiple Close buttons for distinct actions (e.g., Cancel and Save)
Arrow element support for visual connection to the trigger

Usage#

import { ConfirmPopup } from 'primereact/confirmpopup';

<ConfirmPopup.Root>
    <ConfirmPopup.Trigger></ConfirmPopup.Trigger>
    <ConfirmPopup.Portal>
        <ConfirmPopup.Positioner sideOffset={12}>
            <ConfirmPopup.Popup>
                <ConfirmPopup.Arrow />
                <ConfirmPopup.Content>
                    <ConfirmPopup.Icon />
                    <ConfirmPopup.Message></ConfirmPopup.Message>
                </ConfirmPopup.Content>
                <ConfirmPopup.Footer>
                    <ConfirmPopup.Close></ConfirmPopup.Close>
                    <ConfirmPopup.Close></ConfirmPopup.Close>
                </ConfirmPopup.Footer>
            </ConfirmPopup.Popup>
        </ConfirmPopup.Positioner>
    </ConfirmPopup.Portal>
</ConfirmPopup.Root>

Behavior#

Motion Animation#

<ConfirmPopup.Popup motionProps={{ name: 'p-confirmpopup' }}>...</ConfirmPopup.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.

<ConfirmPopup.Close as="a">Cancel</ConfirmPopup.Close>

Render Function Children#

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

<ConfirmPopup.Trigger>{(instance) => <span>{instance.confirmpopup?.state.open ? 'Close' : 'Open'}</span>}</ConfirmPopup.Trigger>

Pass Through#

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

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

API#

ConfirmPopupRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupRootInstance) => 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`	`ConfirmPopupRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupRootPassThrough>`	—
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: ConfirmPopupRootInstance) => 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.
`defaultOpen`	`boolean`	`undefined`
Whether the popover is open by default.
`open`	`boolean`	`undefined`
Whether the popover is open.
`trapped`	`boolean`	`false`
When enabled, focus is trapped within the popover (modal behavior). When disabled, focus leaving the popover closes it (non-modal behavior).
`autoFocus`	`boolean`	`true`
Whether to focus the first focusable element when the popover is opened.
`closeOnEscape`	`boolean`	`true`
Specifies if pressing escape key should hide the dialog.
`onOpenChange`	`(event: usePopoverOpenChangeEvent) => void`	`undefined`
Callback to invoke when the open state changes.
`appendTo`	`"body"` \| `HTMLElement` \| `"self"`	`'body'`
DOM element or CSS selector to append the overlay to.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ConfirmPopup component.

label	type	description
root	ConfirmPopupRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
trigger	ConfirmPopupRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the trigger's DOM element.
positioner	ConfirmPopupRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the positioner's DOM element.
popup	ConfirmPopupRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the popup's DOM element.
arrow	ConfirmPopupRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the arrow's DOM element.
content	ConfirmPopupRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.
icon	ConfirmPopupRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the icon's DOM element.
message	ConfirmPopupRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the message's DOM element.
footer	ConfirmPopupRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the footer's DOM element.
close	ConfirmPopupRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the close's DOM element.

ConfirmPopupTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupTriggerInstance) => 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`	`ConfirmPopupTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupTriggerPassThrough>`	—
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: ConfirmPopupTriggerInstance) => 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-positioner-open`	Present when confirm popup is open
`data-open`	Present when confirm popup is open

Defines passthrough(pt) options of ConfirmPopupTrigger component.

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

ConfirmPopupPortal#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupPortalInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupPortalInstance) => 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`	`ConfirmPopupPortalInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupPortalPassThrough>`	—
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: ConfirmPopupPortalInstance) => 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 ConfirmPopupPortal component.

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

ConfirmPopupPositioner#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupPositionerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupPositionerInstance) => 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`	`ConfirmPopupPositionerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupPositionerPassThrough>`	—
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: ConfirmPopupPositionerInstance) => 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.
`side`	`SideType`	—
The side of the positioner.
`align`	`AlignType`	—
The align of the positioner.
`sideOffset`	`number`	—
The side offset of the positioner.
`alignOffset`	`number`	—
The align offset of the positioner.
`flip`	`boolean`	—
Whether to flip the positioner.
`shift`	`boolean`	—
Whether to shift the positioner.
`hideWhenDetached`	`boolean`	—
Whether to hide the positioner when detached.
`strategy`	`"fixed"` \| `"absolute"`	`'fixed'`
The positioning strategy.
`boundary`	`HTMLElement`	—
The boundary element that constrains the positioner placement. Used in JS fallback mode only; CSS Anchor mode uses the containing block.
`anchor`	`HTMLElement`	—
The anchor element.
`content`	`HTMLDivElement`	—
The content element.
`arrow`	`HTMLDivElement`	—
The arrow element.
`autoZIndex`	`boolean`	`true`
Whether to automatically manage layering.
`baseZIndex`	`number`	`0`
Base zIndex value to use in layering.
`onPlacementChange`	`(placement: { side: SideType; align: AlignType }) => void`	—
Callback invoked when the actual placement changes due to flip or shift.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-open`	Present when confirm popup is open
`data-side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` — placement
`data-align`	`"start"` \| `"center"` \| `"end"` — alignment

CSS Custom Properties

The positioner element exposes CSS custom properties for layout and transform control.

CSS Variable	Description
`--available-height`	Available vertical space in pixels
`--available-width`	Available horizontal space in pixels
`--transform-origin`	Computed transform origin for animations
`--positioner-anchor-width`	Width of the anchor/trigger element

Defines passthrough(pt) options of ConfirmPopupPositioner component.

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

ConfirmPopupPopup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupPopupInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupPopupInstance) => 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`	`ConfirmPopupPopupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupPopupPassThrough>`	—
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: ConfirmPopupPopupInstance) => 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.
`motionProps`	`useMotionProps`	—
Used to apply motion to the popup element. It accepts the same properties as useMotion hook.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-open`	Present when confirm popup is open
`data-closed`	Present when confirm popup is closed

Defines passthrough(pt) options of ConfirmPopupPopup component.

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

ConfirmPopupArrow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupArrowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupArrowInstance) => 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`	`ConfirmPopupArrowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupArrowPassThrough>`	—
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: ConfirmPopupArrowInstance) => 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-side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` — placement
`data-align`	`"start"` \| `"center"` \| `"end"` — alignment

The arrow element exposes CSS custom properties for dynamic positioning:

CSS Variable	Description
`--placer-arrow-x`	Horizontal offset of arrow
`--placer-arrow-y`	Vertical offset of arrow
`--placer-arrow-left`	Left position of arrow element
`--placer-arrow-top`	Top position of arrow element

Defines passthrough(pt) options of ConfirmPopupArrow component.

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

ConfirmPopupContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupContentInstance) => 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`	`ConfirmPopupContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupContentPassThrough>`	—
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: ConfirmPopupContentInstance) => 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 ConfirmPopupContent component.

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

ConfirmPopupIcon#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupIconInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupIconInstance) => 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`	`ConfirmPopupIconInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupIconPassThrough>`	—
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: ConfirmPopupIconInstance) => 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 ConfirmPopupIcon component.

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

ConfirmPopupMessage#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupMessageInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupMessageInstance) => 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`	`ConfirmPopupMessageInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupMessagePassThrough>`	—
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: ConfirmPopupMessageInstance) => 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 ConfirmPopupMessage component.

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

ConfirmPopupFooter#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupFooterInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupFooterInstance) => 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`	`ConfirmPopupFooterInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupFooterPassThrough>`	—
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: ConfirmPopupFooterInstance) => 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 ConfirmPopupFooter component.

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

ConfirmPopupClose#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ConfirmPopupCloseInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ConfirmPopupCloseInstance) => 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`	`ConfirmPopupCloseInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ConfirmPopupClosePassThrough>`	—
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: ConfirmPopupCloseInstance) => 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 ConfirmPopupClose component.

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

Accessibility#

ConfirmPopup component uses alertdialog role. Attributes like aria-label or aria-labelledby can be passed 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 focusable element within the confirm popup.
`shift + tab`	Moves focus to the previous focusable element within the confirm popup.
`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.