All Components

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.

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

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

    public onDeleteData() {
        alert("Data deleted.");
    }
}
In this article