Button Overview
The Button is an Angular directive.
You can configure the appearance of the Button to show only textual content or to display a predefined icon, image, custom icon, or a combination of textual and image content.
Basic Usage
The following example demonstrates the Button in action.
@Component({
selector: 'my-app',
template: `
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="row">
<div class="col-xs-12 col-sm-6 example-col">
<p>Default Buttons</p>
<p>
<button kendoButton (click)="onButtonClick()">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'"></button>
</p>
<p>
<button kendoButton (click)="onButtonClick()" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [disabled]="true"></button>
</p>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Primary Buttons</p>
<p>
<button kendoButton (click)="onButtonClick()" [primary]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true"></button>
</p>
<p>
<button kendoButton (click)="onButtonClick()" [primary]="true" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [disabled]="true"></button>
</p>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Bare Buttons</p>
<p>
<button kendoButton (click)="onButtonClick()" [look]="'bare'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'bare'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'bare'"></button>
</p>
<p>
<button kendoButton (click)="onButtonClick()" [look]="'bare'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'bare'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'bare'" [disabled]="true"></button>
</p>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Primary Bare Buttons</p>
<p>
<button kendoButton (click)="onButtonClick()" [primary]="true" [look]="'bare'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'bare'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'bare'"></button>
</p>
<p>
<button kendoButton (click)="onButtonClick()" [primary]="true" [look]="'bare'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'bare'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'bare'" [disabled]="true"></button>
</p>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Flat Buttons</p>
<p>
<button kendoButton (click)="onButtonClick()" [look]="'flat'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'flat'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'flat'"></button>
</p>
<p>
<button kendoButton (click)="onButtonClick()" [look]="'flat'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'flat'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'flat'" [disabled]="true"></button>
</p>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Primary Flat Buttons</p>
<p>
<button kendoButton (click)="onButtonClick()" [primary]="true" [look]="'flat'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'flat'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'flat'"></button>
</p>
<p>
<button kendoButton (click)="onButtonClick()" [primary]="true" [look]="'flat'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'flat'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'flat'" [disabled]="true"></button>
</p>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Outline Buttons</p>
<p>
<button kendoButton (click)="onButtonClick()" [look]="'outline'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'outline'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'outline'"></button>
</p>
<p>
<button kendoButton (click)="onButtonClick()" [look]="'outline'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'outline'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'outline'" [disabled]="true"></button>
</p>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Primary Outline Buttons</p>
<p>
<button kendoButton (click)="onButtonClick()" [primary]="true" [look]="'outline'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'outline'">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'outline'"></button>
</p>
<p>
<button kendoButton (click)="onButtonClick()" [primary]="true" [look]="'outline'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'outline'" [disabled]="true">Browse</button>
<button kendoButton (click)="onButtonClick()" [icon]="'folder'" [primary]="true" [look]="'outline'" [disabled]="true"></button>
</p>
</div>
<div class="col-xs-12 example-col">
<p>Icon Types</p>
<button kendoButton (click)="onButtonClick()" [icon]="'calendar'">Kendo UI Font Icon</button>
<button kendoButton (click)="onButtonClick()" [iconClass]="'fa fa-calendar fa-fw'">Font Awesome Icon</button>
<button kendoButton (click)="onButtonClick()" [imageUrl]="imageUrl">Image Icon</button>
</div>
</div>
`
})
class AppComponent {
imageUrl: string = 'https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'
onButtonClick() {
console.log('click');
}
}Features
The Button delivers the following features:
Icons
You can enhance the textual content of the Button by adding image, predefined, or custom icons to it. With a view to the web standards, it is better to use a background image because icons are used for decoration and not for representing structural content.
When adding icons, the Button provides options for:
- Using the built-in Kendo UI icons. They are applied through the
iconproperty and displayed as a background for the Button. To see the full list of the web font icons in Kendo UI, refer to the article on styles and layout. - Adding image icons. They are applied through the
imageUrlproperty of the component. - Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the
iconClassproperty.
The following example demonstrates how to use the different types of icons in a Button.
@Component({
selector: 'my-app',
template: `
// Kendo UI font icon
<button kendoButton [icon]="'refresh'">Button</button>
// Image icon
<button kendoButton [imageUrl]="'https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'">Snowboarding</button>
// FontAwsome icon
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<button kendoButton [iconClass]="'fa fa-key fa-fw'">Button</button>
`
})
class AppComponent {}Primary Buttons
The Button enables you to enhance its appearance by making it more visually appealing to the user. To achieve this behavior, set the primary property to true.
@Component({
selector: 'my-app',
template: `
<button kendoButton [primary]="true">Primary Button</button>
`
})
class AppComponent {}Toggleable Buttons
The Button supports visual styling through the togglable property, which indicates whether it is active or not. By default, togglable is set to false. To implement the visual styling, set it to true.
@Component({
selector: 'my-app',
template: `
<button kendoButton [togglable]="true">Toggle me</button>
`
})
class AppComponent {}Styling
The Button enables you to modify its appearance by providing alternative styling options through its ButtonLook configuration.
The ButtonLook options enable you to render:
Bare
The following example demonstrates how to reduce visual clutter by setting a bare button. While keeping the whitespace around the text consistent with the regular buttons, [look]="'bare'" removes the background and border of the Button. Bare Buttons can also be used as interactive icons.
@Component({
selector: 'my-app',
template: `
<button kendoButton [look]="'bare'">Bare Button</button> |
<button kendoButton [look]="'bare'" [icon]="'calendar'"></button>
`
})
class AppComponent {}Flat
The following example demonstrates how to set a flat button.
@Component({
selector: 'my-app',
template: `
<button kendoButton [look]="'flat'">Flat Button</button> |
<button kendoButton [look]="'flat'" [icon]="'calendar'"></button>
`
})
class AppComponent {}Outline
The following example demonstrates how to set an outline button.
@Component({
selector: 'my-app',
template: `
<button kendoButton [look]="'outline'">Outline Button</button> |
<button kendoButton [look]="'outline'" [icon]="'calendar'"></button>
`
})
class AppComponent {}Events
The following example demonstrates basic Button events.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button kendoButton
(click)="onClick()"
(focus)="onFocus()"
(blur)="onBlur()">
My Button
</button>
<event-log title="Event log" [events]="events"></event-log>
`
})
export class AppComponent {
public events: string[] = [];
public onClick(): void {
this.log("click");
}
public onFocus(): void {
this.log("focus");
}
public onBlur(): void {
this.log("blur");
}
private log(event: string, arg: any): void {
this.events.push(`${event}`);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';
import { EventLogComponent } from './event-log.component';
@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent, EventLogComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule]
})
export class AppModule {}
import { Component, Input } from '@angular/core';
@Component({
selector: 'event-log',
template: `
<div class="example-config">
<h5>{{ title }}</h5>
<ul class="event-log">
<li *ngFor="let event of events.reverse()">{{ event }}</li>
</ul>
</div>
`
})
export class EventLogComponent {
@Input() title: string;
@Input() events: string[];
}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);