All Components

Toggleable Button

The Button enables you to indicate whether it is active or inactive.

To make a Button toggleable, update the default false configuration of the toggleable property and set it to true.

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

@Component({
    selector: 'my-app',
    template: `
       <div class="row">
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Default Toggleable Button</p>
            <p class="k-block">
              <button kendoButton (selectedChange)="onSelectedChange($event)" [primary]="true" [toggleable]="true">Petrol</button>
              <button kendoButton (selectedChange)="onSelectedChange($event)" [toggleable]="true">Diesel</button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
            <p>Flat Toggleable Button</p>
            <p class="k-block">
              <button kendoButton [look]="'flat'" [primary]="true" [toggleable]="true">Petrol</button>
              <button kendoButton [look]="'flat'" [toggleable]="true">Diesel</button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
            <p>Outline Toggleable Button</p>
            <p class="k-block">
              <button kendoButton [look]="'outline'" [primary]="true" [toggleable]="true">Petrol</button>
              <button kendoButton [look]="'outline'" [toggleable]="true">Diesel</button>
            </p>
          </div>
        </div>
    `
})
export class AppComponent {
  public onSelectedChange(e) {
    console.log(e)
  }
}
In this article