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 togglable property and set it to true.

@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 [primary]="true" [togglable]="true">Petrol</button>
              <button kendoButton [togglable]="true">Diesel</button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
            <p>Bare Toggleable Button</p>
            <p class="k-block">
              <button kendoButton [look]="'bare'" [primary]="true" [togglable]="true">Petrol</button>
              <button kendoButton [look]="'bare'" [togglable]="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" [togglable]="true">Petrol</button>
              <button kendoButton [look]="'flat'" [togglable]="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" [togglable]="true">Petrol</button>
              <button kendoButton [look]="'outline'" [togglable]="true">Diesel</button>
            </p>
          </div>
        </div>
    `
})
class AppComponent {}
In this article