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>Bare Primary Button</p>
<p class="k-block">
<button kendoButton [look]="'bare'" [primary]="true">Browse</button>
<button kendoButton [icon]="'folder'" [look]="'bare'" [primary]="true">Browse</button>
<button kendoButton [icon]="'folder'" [look]="'bare'" [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 {}