Action Buttons

The Dialog provides options for rendering action buttons and customizing their content.

To specify action buttons in the Dialog, use the <kendo-dialog-actions> element.

    selector: 'my-app',
    template: `
          <div style="font-size: 18px; line-height: 1.3em;">
            <span class="k-icon k-i-warning"></span> Delete Data
        <p style="margin: 30px; text-align: center;">This action cannot be undone.</p>

          <button kendoButton (click)="onDialogClose()">Cancel</button>
          <button kendoButton (click)="onDeleteData()" primary="true">Delete</button>
class AppComponent {
    public onDialogClose() {
        alert("No data deleted.");

    public onDeleteData() {
        alert("Data deleted.");

In this article