Title

The Dialog provides options for displaying a title and customizing its behavior.

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

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

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Dialog title={"Awesome title goes here"} />
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

To customize the title by passing components, functions or HTML elements.

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

class CustomTitleBar extends React.Component {
    render() {
        return (
            <div className="custom-title" style={{ fontSize: '18px', lineHeight: '1.3em' }}>
                <span className="k-icon k-i-print" />Print this page
            </div>);
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Dialog title={<CustomTitleBar />}>
                <p style={{ margin: "30px", textAlign: "center" }}>A sample print dialog.</p>
            </Dialog>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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

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

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Dialog height={300}>
                <div style={{ textAlign: "center", margin: "30px" }}>
                    <h4>Enter your e-mail below to unlock.</h4>
                    <p>
                        <input className="k-textbox" placeholder="Your e-mail here" style={{ width: "300px" }} />
                    </p>
                    <p>
                        <button className="k-button k-primary" style={{ width: "300px" }}>GET MY $10 OFF</button>
                    </p>
                    <a href="#">No thanks!</a>
                </div>
            </Dialog>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article