All Components

Button Overview

The Button is an Angular directive.

You can configure the appearance of the Button to show only textual content or to display a predefined icon, image, custom icon, or 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="row">
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Default Buttons</p>
            <p>
              <button kendoButton (click)="onButtonClick()">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'"></button>
            </p>
            <p>
              <button kendoButton (click)="onButtonClick()" [disabled]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [disabled]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [disabled]="true"></button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
            <p>Primary Buttons</p>
            <p>
              <button kendoButton (click)="onButtonClick()" [primary]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true"></button>
            </p>
            <p>
              <button kendoButton (click)="onButtonClick()" [primary]="true" [disabled]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [disabled]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [disabled]="true"></button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
            <p>Bare Buttons</p>
            <p>
              <button kendoButton (click)="onButtonClick()" [bare]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [bare]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [bare]="true"></button>
            </p>
            <p>
              <button kendoButton (click)="onButtonClick()" [bare]="true" [disabled]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [bare]="true" [disabled]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [bare]="true" [disabled]="true"></button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
            <p>Primary Bare Buttons</p>
            <p>
              <button kendoButton (click)="onButtonClick()" [primary]="true" [bare]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [bare]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [bare]="true"></button>
            </p>
            <p>
              <button kendoButton (click)="onButtonClick()" [primary]="true" [bare]="true" [disabled]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [bare]="true" [disabled]="true">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [bare]="true" [disabled]="true"></button>
            </p>
          </div>

          <div class="col-xs-12 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>
            <button kendoButton (click)="onButtonClick()" [imageUrl]="imageUrl">Image Icon</button>
          </div>
        </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:

Icons

You can enhance the textual content of the Button by adding image, predefined, or custom icons to it. With a view to the web standards, it is better to use a background image because icons are used for decoration and not for representing structural content.

When adding icons, the Button provides options for:

  • Using the built-in Kendo UI icons. They are applied through the icon property and displayed as a background for the Button. To see the full list of the web font icons in Kendo UI, refer to the article on styles and layout.
  • Adding image icons. They are applied through the imageUrl property of the component.
  • Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the iconClass property.

The following example demonstrates how to use the different types of icons in a Button.

@Component({
    selector: 'my-app',
    template: `
        // Kendo UI font icon
        <button kendoButton [icon]="'refresh'">Button</button>

        // Image icon
        <button kendoButton [imageUrl]="'http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'">Snowboarding</button>

        // FontAwsome icon
        <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 {}

Primary Buttons

The Button enables you to enhance its appearance by making it more visually appealing to the user. To achieve this behavior, set the primary property to true.

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

Toggleable Buttons

The Button supports visual styling through the togglable property, which indicates whether it is active or not. By default, togglable is set to false. To implement the visual styling, set it to true.

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

Bare Buttons

The Button enables you to modify its appearance by using alternative styling options. Currently, the Buttons support their rendering as bare buttons through the bare property.

To reduce visual clutter, set bare to true. While keeping the whitespace around the text consistent with the regular buttons, it will remove the background and border of the Button. The bare buttons can be used as interactive icons, too.

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

Events

The following example demonstrates basic Button events.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <button kendoButton
            (click)="onClick()"
            (focus)="onFocus()"
            (blur)="onBlur()">
            My Button
        </button>
        <event-log title="Event log" [events]="events"></event-log>
    `
})

export class AppComponent {
    public events: string[] = [];

    public onClick(): void {
        this.log("click");
    }

    public onFocus(): void {
        this.log("focus");
    }

    public onBlur(): void {
        this.log("blur");
    }

    private log(event: string, arg: any): void {
        this.events.push(`${event}`);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';
import { EventLogComponent }   from './event-log.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent, EventLogComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, ButtonsModule]
})
export class AppModule {}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events.reverse()">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article