All Components

Title

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

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

<kendo-dialog title="Awesome title goes here">
</kendo-dialog>

To customize the title by adding arbitrary components, nest them inside <kendo-dialog-titlebar>.

<kendo-dialog>
  <kendo-dialog-titlebar>
    <div style="font-size: 18px; line-height: 1.3em;">
      <span class="k-icon k-i-print"></span> Print this page
    </div>
  </kendo-dialog-titlebar>

    <p style="margin: 30px; text-align: center;">A sample print dialog.</p>
</kendo-dialog>

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

<kendo-dialog>
  <div style="text-align: center; margin: 30px;">
    <h4>Enter your e-mail below to unlock.</h4>
    <p>
      <input class="k-textbox" placeholder="Your e-mail here" style="width: 300px;" />
    </p>
    <p>
      <button kendoButton primary="true" style="width: 300px;">GET MY $10 OFF</button>
    </p>
    <a href="#">No thanks!</a>
  </div>
</kendo-dialog>
In this article