Dialog Component

Specifies a Dialog component that provides a modal or non-modal overlay to display content above the main interface. The Dialog component can be used to create alerts, confirmation dialogs, forms, or any content that requires user attention or interaction. It supports multiple customization options including positioning, animation effects, header/footer structure, and accessibility features. Use header and footer props to create a structured dialog layout:

Usage

To import and use the Dialog component in your application, use the following code snippet:

import { Dialog } from "@syncfusion/react-popups";

const [isOpen, setIsOpen] = useState(false);
<Dialog open={isOpen} onClose={() => setIsOpen(false)} modal={true} header="Dialog Title" footer={<><button onClick={() => setIsOpen(false)}>Close</button></>} >
   <p>This is the dialog content.</p>
</Dialog>

import { Dialog } from "@syncfusion/react-popups";

const [isOpen, setIsOpen] = useState(false);
<Dialog open={isOpen} onClose={() => setIsOpen(false)} modal={true} header="Dialog Title" footer={<><button onClick={() => setIsOpen(false)}>Close</button></>} >
   <p>This is the dialog content.</p>
</Dialog>

Demos

Explore the demos of the React Dialog component. Refer to this page.

Props

The following table outlines the props for the Dialog component:

Name	Type	Default	Description
animation	DialogAnimationProps	{ effect: 'Fade', duration: 400, delay: 0 }	Specifies the animation effect, duration, and delay for the dialog's entry and exit.
closeIcon	node	true	Specifies the close icon to display in the dialog header. When set to true, displays the default close icon. When set to a ReactNode, displays the custom icon/element provided. When set to false, no close icon is displayed.
draggable	boolean	false	Specifies whether the dialog can be dragged by its header to reposition it.
footer	node	-	Specifies the content to display in the dialog footer section. This is typically used for action buttons like "OK", "Cancel", etc.
fullScreen	boolean	false	Specifies whether the dialog should expand to fill the entire viewport. The dialog maintains its header, content, and footer structure but takes up the full width and height of the screen.
header	node	-	Specifies the content to display in the dialog header section. This can be text or any valid React node.
initialFocusRef	React.RefObject<HTMLElement>	-	Specifies the element that should receive focus when the dialog opens. This overrides the default focus behavior, which focuses on the first focusable element.
modal	boolean	true	Specifies if the dialog should behave as a modal. When true, an overlay prevents interaction with the underlying content, traps focus within the dialog, and blocks scrolling of the background content. When false, the dialog appears without an overlay and allows interaction with the page behind it.
open	boolean	false	Specifies whether the dialog is displayed (true) or hidden (false). This is a controlled property that must be managed by the parent component.
position	DialogPosition	'Center'	Specifies the positioning of the dialog on the screen. Uses predefined positions or custom coordinates via style properties.
resizable	boolean	false	Specifies whether the dialog can be resized by dragging its edges or corners.
resizeHandles	ResizeDirections[]	['SouthEast']	Specifies which edges or corners of the dialog can be dragged to resize it. Only applies when the resizable is true.
target	HTMLElement	document.body	Specifies the element where the dialog should be rendered. By default, dialogs are rendered at the document body, but this prop allows to render the dialog within any element.

Events

The following table outlines the events for the Dialog component:

Name	Type	Description
onClose	(event?: React.SyntheticEvent \| React.KeyboardEvent) => void	Specifies the callback function invoked when the dialog needs to close. This occurs when the user clicks the overlay, presses the ESC key, or clicks the close icon (if provided).
onDrag	(event: MouseEvent \| TouchEvent) => void	Specifies the callback function that triggers while the dialog is being dragged.
onDragStart	(event: DragEvent) => void	Specifies the callback function that triggers when the dialog starts being dragged.
onDragStop	(event: MouseEvent \| TouchEvent) => void	Specifies the callback function that triggers when the dialog stops being dragged.
onResize	(event: ResizeEvent) => void	Specifies the callback function that triggers while the dialog is being resized.
onResizeStart	(event: ResizeEvent) => void	Specifies the callback function that triggers when the dialog starts being resized.
onResizeStop	(event: ResizeEvent) => void	Specifies the callback function that triggers when the dialog stops being resized.