Getting Started with KendoReact Dialog

The KendoReact Dialog communicates specific information and prompts users to take specific actions by interacting with a modal dialog.

The KendoReact Dialog is distributed through NPM under the kendo-react-dialogs package.

The Dialog component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Basic Usage

The following example demonstrates the Dialog in action.

import React from 'react';
import ReactDOM from 'react-dom';
import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';

class App extends React.Component {
    constructor(props) {
        this.state = {
            visible: true
        this.toggleDialog = this.toggleDialog.bind(this);

    toggleDialog() {
            visible: !this.state.visible

    render() {
        return (
                <button className="k-button" onClick={this.toggleDialog}>Open Dialog</button>
                {this.state.visible && <Dialog title={"Please confirm"} onClose={this.toggleDialog}>
                    <p style={{ margin: "25px", textAlign: "center" }}>Are you sure you want to continue?</p>
                        <button className="k-button" onClick={this.toggleDialog}>No</button>
                        <button className="k-button" onClick={this.toggleDialog}>Yes</button>
    <App />,

Functionality and Features