All Components

Button Overview

The Button is an Angular directive.

The appearance of the Button can be configured to show textual content only or to display a predefined icon, an image, or a custom icon, or yet a combination of textual and image content.

Basic Usage

The following example demonstrates the Button in action.

@Component({
    selector: 'my-app',
    template: `
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

        <div class="example-col">
          <p>Text only</p>
          <button kendoButton (click)="onButtonClick()">Default</button>
          <button kendoButton (click)="onButtonClick()" [primary]="true">Primary</button>
          <button kendoButton (click)="onButtonClick()" [bare]="true">Bare</button>
          <button kendoButton (click)="onButtonClick()" [disabled]="true">Disabled</button>
        </div>

        <div class="example-col">
          <p>Icons only</p>
          <button kendoButton (click)="onButtonClick()" [icon]="'refresh'"></button>
          <button kendoButton (click)="onButtonClick()" [primary]="true" [icon]="'refresh'"></button>
          <button kendoButton (click)="onButtonClick()" [bare]="true" [icon]="'refresh'"></button>
          <button kendoButton (click)="onButtonClick()" [disabled]="true" [icon]="'refresh'"></button>
        </div>

        <div class="example-col">
          <p>Text + Icons</p>
          <button kendoButton (click)="onButtonClick()" [icon]="'refresh'">Refresh</button>
          <button kendoButton (click)="onButtonClick()" [primary]="true" [icon]="'refresh'">Refresh</button>
          <button kendoButton (click)="onButtonClick()" [bare]="true" [icon]="'refresh'">Refresh</button>
          <button kendoButton (click)="onButtonClick()" [disabled]="true" [icon]="'refresh'">Refresh</button>
        </div>

        <div class="example-col">
          <p>Icon Types</p>
          <button kendoButton (click)="onButtonClick()" [icon]="'calendar'">Kendo UI Font Icon</button>
          <button kendoButton (click)="onButtonClick()" [iconClass]="'fa fa-calendar fa-fw'">Font Awesome Icon</button><br /><br />
          <button kendoButton (click)="onButtonClick()" [imageUrl]="imageUrl">Image Icon</button>
        </div>
    `
})

class AppComponent {
    imageUrl: string = 'http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'

    onButtonClick() {
        console.log('click');
    }
}

Features

The Button delivers the following features:

In this article