React Dialog

Overview

The React Dialog component, part of KendoReact, presents a modal window with content and prompts the user to take specific actions by interacting with built-in buttons for different actions. This React UI component shines whenever a decision has to be made that requires the end-user to focus and bring the component to the front of the user’s screen.

See React Dialog Overview demo

React Dialog - Overview, KendoReact UI Library

Title

Every KendoReact Dialog component has a title area that can be blank, or contain custom text, to give the user context around what the Dialog prompt is all about.

See React Dialog Title demo

React Dialog - Title, KendoReact UI Library

Action Buttons

The KendoReact Dialog has the flexibility to define custom actions and buttons at the bottom of the component, referred to as the Dialog Action Buttons. Each option in this area has a button that developers can hook into in order to perform an action based on the user’s selection.

See React Dialog Action Buttons demo

React Dialog - Action Buttons, KendoReact UI Library

Visibility

Creating centered modal windows can be tough to do from scratch, but the KendoReact Dialog component will always display itself as a modal dialog centered in the screen. The visibility of the React Dialog component can be toggled to visible or hidden with a single property.

See React Dialog Visibility demo

Dimensions

By default, the KendoReact Dialog has some internal calculations for height and width, but these can easily be overridden by using the width and height bindings of the Dialog component.

See React Dialog Dimensions demo

React Dialog - Dimensions, KendoReact UI Library

Keyboard Navigation

To help users traverse the KendoReact Dialog component with keyboard navigation the component has several built-in keyboard shortcuts that can be used to not just interact with the Dialog component itself, but also elements contained within it.

See React Dialog Keyboard Navigation demo

Globalization

Many apps written with KendoReact require support for Right-to-Left, or RTL, within the components. With the KendoReact Dialog, Right-to-Left support can be achieved with a single property setting.

See React Dialog Globalization demo

React Dialog - Globalization, KendoReact UI Library

Accessibility

Continuing a tradition of putting accessibility at the forefront of building React UI components, the KendoReact Dialog is AAA rated for WCAG 2.0, and compliant with both WAI-ARIA and Section 508 standards.

React Dialog - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.