Dialog

An unstyled modal dialog component with built-in focus trap, scroll lock, drag support, and dismissable backdrop.

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

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Dialog 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, Maximizable, Close, Content, 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
Built-in drag support with viewport boundary enforcement
Maximizable mode with fullscreen toggle
Scroll lock support via blockScroll

Usage#

import { Dialog } from 'primereact/dialog';

<Dialog.Root>
    <Dialog.Trigger></Dialog.Trigger>
    <Dialog.Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
            <Dialog.Popup>
                <Dialog.Header>
                    <Dialog.Title></Dialog.Title>
                    <Dialog.HeaderActions>
                        <Dialog.Maximizable></Dialog.Maximizable>
                        <Dialog.Close></Dialog.Close>
                    </Dialog.HeaderActions>
                </Dialog.Header>
                <Dialog.Content></Dialog.Content>
                <Dialog.Footer></Dialog.Footer>
            </Dialog.Popup>
        </Dialog.Positioner>
    </Dialog.Portal>
</Dialog.Root>

Behavior#

Motion Animation#

<Dialog.Popup motionProps={{ name: 'p-dialog', appear: true }}>...</Dialog.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.

<Dialog.Trigger as="div">...</Dialog.Trigger>
<Dialog.Close as="a">...</Dialog.Close>

Default elements: Root=div, Trigger=button, Positioner=div, Popup=div, Header=div, Title=div, HeaderActions=div, Maximizable=button, Close=button, Content=div, Footer=div.

Render Function Children#

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

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

Pass Through#

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

Component-driven development is an approach that focuses on building loosely coupled, independent components that can be composed together to build complex user interfaces. This methodology promotes reusability, testability, and maintainability.

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

API#

DialogRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DialogRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DialogRootInstance) => 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`	`DialogRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DialogRootPassThrough>`	—
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: DialogRootInstance) => 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.
`minX`	`number`	`0`
Minimum value for the left coordinate of dialog in dragging.
`minY`	`number`	`0`
Minimum value for the top coordinate of dialog in dragging.
`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: DialogRootChangeEvent) => 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
`data-maximized`	Present when the dialog is maximized

Defines passthrough(pt) options of Dialog component.

label	type	description
root	DialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
backdrop	DialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the backdrop's DOM element.
trigger	DialogRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the trigger's DOM element.
header	DialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the header's DOM element.
title	DialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the title's DOM element.
headerActions	DialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the headerActions's DOM element.
maximizable	DialogRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the maximizable's DOM element.
close	DialogRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the close's DOM element.
content	DialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.
footer	DialogRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the footer's DOM element.

DialogTrigger#

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

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

DialogPortal#

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

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

DialogBackdrop#

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

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

DialogPositioner#

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
`data-maximized`	Present when the dialog is maximized

DialogPopup#

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

Uses VisuallyHidden elements internally for focus trap boundaries.

Defines passthrough(pt) options of DialogPopup component.

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

DialogHeader#

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

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

DialogTitle#

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

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

DialogHeaderActions#

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

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

DialogMaximizable#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DialogMaximizableInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DialogMaximizableInstance) => 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`	`DialogMaximizableInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DialogMaximizablePassThrough>`	—
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: DialogMaximizableInstance) => 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 DialogMaximizable with a borderless style.
`severity`	`string & {}` \| `"secondary"` \| `"info"` \| `"success"` \| `"warn"` \| `"danger"` \| `"contrast"` \| `"help"`	`'secondary'`
Severity type of the DialogMaximizable.
`variant`	`"link"` \| `"text"` \| `"outlined"`	`'text'`
Variant of the DialogMaximizable.
`rounded`	`boolean`	`true`
Whether to show the DialogMaximizable with a rounded style.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-maximized`	Present when the dialog is maximized
`data-minimized`	Present when the dialog is not maximized

Defines passthrough(pt) options of DialogMaximizable component.

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

DialogClose#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DialogCloseInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DialogCloseInstance) => 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`	`DialogCloseInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DialogClosePassThrough>`	—
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: DialogCloseInstance) => 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 DialogClose with a borderless style.
`severity`	`string & {}` \| `"secondary"` \| `"info"` \| `"success"` \| `"warn"` \| `"danger"` \| `"contrast"` \| `"help"`	`'secondary'`
Severity type of the DialogClose.
`variant`	`"link"` \| `"text"` \| `"outlined"`	`'text'`
Variant of the DialogClose.
`rounded`	`boolean`	`true`
Whether to show the DialogClose 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 DialogClose component.

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

DialogContent#

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

Defines passthrough(pt) options of DialogContent component.

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

DialogFooter#

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

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

Accessibility#

Dialog 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 dialog 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 dialog if `modal` is true. Otherwise, the focusable element in the page tab sequence.
`escape`	Closes the dialog if `closeOnEscape` is true.

Close Button Keyboard Support#

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