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">
        <button kendoButton (click)="onButtonClick()">Button</button>
        <br /><br />
        <button kendoButton (click)="onButtonClick()" [disabled]="true">Disabled Button</button>
        <br /><br />
        <button kendoButton (click)="onButtonClick()" [primary]="true">Primary Button</button>
        <br /><br />
        <button kendoButton (click)="onButtonClick()" [icon]="'refresh'">Kendo UI Icon</button>
        <br /><br />
        <button kendoButton (click)="onButtonClick()" [iconClass]="'fa fa-key fa-fw'">Font Awesome Icon</button>
        <br /><br />
        <button kendoButton (click)="onButtonClick()" [imageUrl]="imageUrl">Image</button>
    `
})

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

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

Configuration

Set Primary Buttons

The Button enables you to add visual weight to it and make it primary.

@Component({
    selector: 'my-app',
    template: `
        <button kendoButton [primary]="true">Primary Button</button>
    `
})
class AppComponent {}

Add Icons

The Button enhances textual content by providing the option to add icons—image, predefined, or custom ones. Taking web standards into consideration, it is better to use a background image, as the icon does not represent structural content, but is simply decoration.

Use the icon Property

The Kendo UI built-in icons are applied through the icon property and displayed as the background of the Button.

To see the full list of the Kendo UI web font icons, refer to the article on styles and layout.

@Component({
    selector: 'my-app',
    template: `
        <button kendoButton [icon]="'refresh'">Button</button>
    `
})
class AppComponent {}

Use the imageUrl Property

Image icons are applied through the imageUrl property.

@Component({
    selector: 'my-app',
    template: `
        <button kendoButton [imageUrl]="'http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'">Snowboarding</button>
    `
})
class AppComponent {}

Use the iconClass Property

FontAwesome or other font icons also can reside in a Button. They are implemented by setting the required third-party CSS classes through the iconClass property.

@Component({
    selector: 'my-app',
    template: `
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <button kendoButton [iconClass]="'fa fa-key fa-fw'">Button</button>
    `
})
class AppComponent {}

To see the full list of the Kendo UI web font icons, refer to the article on styles and layout.

Toggle

The Button supports visual styling that indicates if it is active. By default, the togglable property is set to false. To add visual styles, set it to true.

@Component({
    selector: 'my-app',
    template: `
       <button kendoButton [togglable]="true">Toggle me</button>
    `
})
class AppComponent {}
In this article