All Components

Components / Buttons / Button

Primary Button

The Button enables you to highlight actions to the user by enhancing its appearance.

To achieve this behavior, set the primary property to true.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Default Primary Button</p>
            <p class="k-block">
              <button kendoButton [primary]="true">Browse</button>
              <button kendoButton [icon]="'folder'" [primary]="true">Browse</button>
              <button kendoButton [icon]="'folder'" [primary]="true"></button>
            </p>
          </div>

         <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Flat Primary Button</p>
            <p class="k-block">
              <button kendoButton [look]="'flat'" [primary]="true">Browse</button>
              <button kendoButton [icon]="'folder'" [look]="'flat'" [primary]="true">Browse</button>
              <button kendoButton [icon]="'folder'" [look]="'flat'" [primary]="true"></button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Outline Primary Button</p>
            <p class="k-block">
              <button kendoButton [look]="'outline'" [primary]="true">Browse</button>
              <button kendoButton [icon]="'folder'" [look]="'outline'" [primary]="true">Browse</button>
              <button kendoButton [icon]="'folder'" [look]="'outline'" [primary]="true"></button>
            </p>
          </div>
        </div>
    `
})
class AppComponent {}
In this article