---
title: Overview
page_title: Dialog Overview - Components - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI Dialog wrapper for React delivers and use the component in React projects."
slug: overview_dialog
position: 0
---

# Dialog Overview

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

The Dialog wrapper for React is a client-side wrapper for the [Kendo UI Dialog](http://docs.telerik.com/kendo-ui/api/javascript/ui/dialog) widget.

## Basic Usage

The following example demonstrates the Dialog in action.

```jsx-preview

    class LayoutsContainer extends React.Component {

       constructor(props) {
            super(props);
            this.actions = [
                {
                    text:"Yes",
                    primary:true,
                    action:function(e){
                        e.sender.close()
                    }
                },
                 {
                    text:"No",
                    action:function(e){
                        e.sender.close()
                    }
                }
            ]
        }

        open(){
           $('[data-role="dialog"]').data('kendoDialog').open();
        }

      render() {
        return (
          <div className={"example-wrapper"}>
            <a className={"k-button"} onClick={this.open}>Open dialog</a>
            <Dialog title="Please confirm"  minWidth={250} width={450} actions = {this.actions}>
                <p style={{margin: "30px", textAlign: "center"}}>Are you sure you want to continue?</p>
            </Dialog>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer />,
      document.querySelector('my-app')
    );
```

## Installation

1. Download and install the package.

    ```sh
        npm install --save @progress/kendo-dialog-react-wrapper
    ```

2. Once installed, import the desired component from the package.

    ```sh
        import { Dialog } from '@progress/kendo-dialog-react-wrapper';
    ```

3. You are required to install one of the Kendo UI themes to style your components.

## Dependencies

The Dialog package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

* @progress/kendo-ui

## Features and Functionalities

* [Title](#toc-title)
* [Visibility](#toc-visibility)
* [Button content](#toc-button-content)
* [Dimensions](#toc-dimensions)

### Title

To set a title to the Dialog, use its `title` property.

```jsx

    class LayoutsContainer extends React.Component {

       constructor(props) {
            super(props);
            this.actions = [
                {
                    text:"Yes",
                    primary:true,
                    action:function(e){
                        e.sender.close()
                    }
                },
                 {
                    text:"No",
                    action:function(e){
                        e.sender.close()
                    }
                }
            ]
        }

        open(){
           $('[data-role="dialog"]').data('kendoDialog').open();
        }

      render() {
        return (
          <div className={"example-wrapper"}>
            <a className={"k-button"} onClick={this.open}>Open dialog</a>
            <Dialog title="Please confirm"  minWidth={250} width={450} actions = {this.actions}>
                <p style={{margin: "30px", textAlign: "center"}}>Are you sure you want to continue?</p>
            </Dialog>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer />,
      document.querySelector('my-app')
    );
```

If not specified, the Dialog will not display a title.

```jsx

    class LayoutsContainer extends React.Component {

       constructor(props) {
            super(props);
            this.actions = [
                {
                    text:"Yes",
                    primary:true,
                    action:function(e){
                        e.sender.close()
                    }
                },
                 {
                    text:"No",
                    action:function(e){
                        e.sender.close()
                    }
                }
            ]
        }

        open(){
           $('[data-role="dialog"]').data('kendoDialog').open();
        }

      render() {
        return (
          <div className={"example-wrapper"}>
            <a className={"k-button"} onClick={this.open}>Open dialog</a>
            <Dialog minWidth={250} width={450} actions = {this.actions}>
                <p style={{margin: "30px", textAlign: "center"}}>Are you sure you want to continue?</p>
            </Dialog>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer />,
      document.querySelector('my-app')
    );
```

### Visibility

To control the visibility of the Dialog, use its `open` and `close` methods. By default, the component is visible. To hide it, use the `close` method.

```jsx

    class LayoutsContainer extends React.Component {

       constructor(props) {
            super(props);
            this.actions = [
                {
                    text:"Yes",
                    primary:true,
                    action:function(e){
                        e.sender.close()
                    }
                },
                 {
                    text:"No",
                    action:function(e){
                        e.sender.close()
                    }
                }
            ]
        }

        open(){
           $('[data-role="dialog"]').data('kendoDialog').open();
        }

      render() {
        return (
          <div className={"example-wrapper"}>
            <a className={"k-button"} onClick={this.open}>Open dialog</a>
            <Dialog title="Please confirm"  minWidth={250} width={450} actions = {this.actions}>
                <p style={{margin: "30px", textAlign: "center"}}>Are you sure you want to continue?</p>
            </Dialog>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer />,
      document.querySelector('my-app')
    );
```

### Button Content

To specify the action buttons in the Dialog, use the `actions` property.

```jsx

    class LayoutsContainer extends React.Component {

       constructor(props) {
            super(props);
            this.actions = [
                {
                    text:"Yes",
                    primary:true,
                    action:function(e){
                        e.sender.close()
                    }
                },
                 {
                    text:"No",
                    action:function(e){
                        e.sender.close()
                    }
                }
            ]
        }

        open(){
           $('[data-role="dialog"]').data('kendoDialog').open();
        }

      render() {
        return (
          <div className={"example-wrapper"}>
            <a className={"k-button"} onClick={this.open}>Open dialog</a>
            <Dialog title="Please confirm"  minWidth={250} width={450} actions = {this.actions}>
                <p style={{margin: "30px", textAlign: "center"}}>Are you sure you want to continue?</p>
            </Dialog>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer />,
      document.querySelector('my-app')
    );
```

### Dimensions

To specify the dimensions of the Dialog, use its `width` and `height` configurations.

```jsx

    class LayoutsContainer extends React.Component {

       constructor(props) {
            super(props);
            this.actions = [
                {
                    text:"Yes",
                    primary:true,
                    action:function(e){
                       e.sender.close()
                    }
                },
                 {
                    text:"No",
                    action:function(e){
                        e.sender.close()
                    }
                }
            ]
        }

        open(){
           $('[data-role="dialog"]').data('kendoDialog').open();
        }

      render() {
        return (
          <div className={"example-wrapper"}>
            <a className={"k-button"} onClick={this.open}>Open dialog</a>
            <Dialog title="Please confirm"  minWidth={250} width={450} height={400} actions = {this.actions}>
                <p style={{margin:"30px", textAlign:"center"}}>Are you sure you want to continue?</p>
            </Dialog>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer />,
      document.querySelector('my-app')
    );
```

## Suggested Links

* [Kendo UI Dialog for jQuery](http://docs.telerik.com/kendo-ui/controls/layout/dialog/overview)
* [API Reference of the Dialog Widget](http://docs.telerik.com/kendo-ui/api/javascript/ui/dialog)