All Components

Buttons Overview

The Buttons provide a clickable UI functionality with arbitrary content.

The package includes the following components:

  • Button—Represents a directive that can be applied on a <button></button> element. Buttons can be temporarily enabled and disabled depending on the business logic of your project. They can also accommodate background, image, and font icons, which provide a meaningful context and help you to send your message across much more easily.
  • ButtonGroup—Contains a number of Button instances that can be initialized and controlled simultaneously.

Basic Usage

The following example demonstrates the Button and ButtonGroup components in action.

    selector: 'my-app',
    template: `
        <link rel="stylesheet" href="">
        <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>

            <button kendoButton [togglable]="true">
                Option A
            <button kendoButton [togglable]="true">
                Option B
            <button kendoButton [togglable]="true">
                Option C

class AppComponent {
    imageUrl: string = '';

    onButtonClick() {


  1. The Buttons package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-buttons
  3. Once installed, import the ButtonsModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ButtonsModule } from '@progress/kendo-angular-buttons';
    import { AppComponent } from './app.component';
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, ButtonsModule]
    export class AppModule {


The DropDowns package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • rxjs
In this article