All Components

Disabled Button

By default, the Button is enabled.

To disable it, set the disabled property to true.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Default Disabled Button</p>
            <p class="k-block">
              <button kendoButton (click)="onButtonClick()" [primary]="true" [disabled]="true">Apply</button>
              <button kendoButton (click)="onButtonClick()" [disabled]="true">Cancel</button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
            <p>Bare Disabled Button</p>
            <p class="k-block">
              <button kendoButton (click)="onButtonClick()" [look]="'bare'" [primary]="true" [disabled]="true">Apply</button>
              <button kendoButton (click)="onButtonClick()" [look]="'bare'" [disabled]="true">Cancel</button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
            <p>Flat Disabled Button</p>
            <p class="k-block">
              <button kendoButton (click)="onButtonClick()" [look]="'flat'" [primary]="true" [disabled]="true">Apply</button>
              <button kendoButton (click)="onButtonClick()" [look]="'flat'" [disabled]="true">Cancel</button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
            <p>Outline Disabled Button</p>
            <p class="k-block">
              <button kendoButton (click)="onButtonClick()" [look]="'outline'" [primary]="true" [disabled]="true">Apply</button>
              <button kendoButton (click)="onButtonClick()" [look]="'outline'" [disabled]="true">Cancel</button>
            </p>
          </div>
        </div>
    `
})
class AppComponent {
    onButtonClick() {
        console.log('click');
    }
}
In this article