React Dialog

The React Dialog component is a pop-up window that appears in front of app content to show important information, collecting user input, showing forms, or presenting detailed content.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let's add the React Dialog component to the project.

Installing Syncfusion® React packages

To use the React Dialog component in this project, the @syncfusion/react-popups package needs to be installed using the following command:

npm install @syncfusion/react-popups

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the Dialog component and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-popups/styles/material.css';

Adding Dialog component

To include the Dialog component in your application, import the Dialog from the @syncfusion/react-popups package in App.tsx.

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

Add the Dialog component in application as shown in below code example.

import { Dialog } from '@syncfusion/react-popups';
import { Button, Variant } from '@syncfusion/react-buttons';
import { useState } from 'react';

export default function App() {
    const [visible, setVisible] = useState(false);

    return (
        <div className="component-section">
            <Button onClick={() => setVisible(true)}>Open Dialog</Button>
            <Dialog
                header="Cookie Policy"
                open={visible}
                onClose={() => setVisible(false)}
                style={{ maxWidth: '400px' }}
                footer={<Button onClick={() => setVisible(false)} variant={Variant.Standard}>I Understand</Button>}
            >
                <div>
                    This website uses cookies to improve your browsing experience.
                    By continuing to use our site, you agree to our use of cookies in accordance
                    with our Privacy Policy. Cookies help us remember your preferences and
                    understand how visitors interact with our website.
                </div>
            </Dialog>
        </div>
    );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates a basic Dialog with simple content and header. The dialog can be opened and closed using the open property.

Confirmation dialog

Confirmation dialog is a pop-up that appears before performing an important action, with buttons like "Yes/No" to confirm or cancel the action.

Alert dialog

Alert dialogs display important information that requires user acknowledgment. They usually contain a message and a single action button like "OK".

Positioning

The Dialog component can be positioned at different locations on the screen using the position property. This allows you to control where the dialog appears relative to the viewport.

Form dialog

Form dialogs contain interactive form elements and are commonly used for data entry, settings, or user input scenarios. They typically include form validation and submit/cancel actions.

Full screen mode

The fullscreen property allows the dialog to occupy the entire viewport, making it ideal for showing lots of complex contents or mobile interfaces where maximum screen is needed.

Non-modal dialog

The modal property determines whether the dialog is modal or non-modal. Non-modal dialogs allow users to interact with the background content while the dialog is open. This is useful for tool windows or information panels that don't require exclusive focus.

Action buttons

Dialogs can include custom action buttons in the footer area. These buttons typically handle user decisions like "Upload", "Cancel", etc.

Draggable dialog

The draggable property allows the dialog to be moved around the screen by clicking and dragging the header area. This provides flexibility in positioning for better user experience.

Resizable dialog

The resizable property allows users to adjust the dialog size by dragging the edges or corners. This is particularly useful for dialogs contains different amounts of content that might need more or less space.

The resizeHandles property controls which parts of the dialog can be dragged to resize it. You can specify individual directions like South (bottom edge), East (right edge), NorthWest (top-left corner), or use All to allow resizing from any edge or corner. This flexibility ensures that the dialog can be resized in a way that best suits the user's needs.

Multiple dialogs

Multiple dialogs can be opened simultaneously with proper z-index management. This demonstrates how nested or layered dialogs behave in the application.

Animation

The animation property allows you to specify custom animations for opening and closing the dialog. Custom animations can enhance the user experience and provide visual feedback.

Initial focus

The initialFocusRef property allows you to set the initial focus to a specific element when the dialog is opened. This improves accessibility and user experience by directing attention to the most relevant control.

Target

The target property allows you to render the dialog within a specific HTML element instead of the default document body. This is useful for creating contained experiences where the dialog should be scoped to a particular area of the page.

Scrolling long content

When dialog content exceeds the available space, scrollbars are automatically added to maintain usability while keeping the dialog within viewport bounds.

Accessibility

The Dialog component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Dialog component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Dialog component follows the WAI-ARIA patterns to meet accessibility requirements. The following ARIA attributes are used in the Dialog component:

Keyboard interaction

The Dialog component follows the keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported: