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="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 a Button for Angular 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 the icon does not represent structural content but is simply used for decoration.

When adding icons, the Button provides options for:

  • Using the Kendo UI built-in icons. They 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.
  • Adding image icons. They are applied through the imageUrl property.
  • 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 them 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 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 {}

Bare Buttons

You can change the appearance of the Button by using its alternative styling options. Currently, the Buttons support the option for showing them as bare buttons.

To reduce visual clutter, you can set the bare property 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

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