Control Types

You can add specific tools and controls to the ToolBar container.

Button Controls

The ToolBar supports the following button-type controls:

Buttons

To render a button in the ToolBar container, add the kendo-toolbar-button tag during initialization. For more information, refer to the Button API.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-button
                [text]="'Button'"
                [showText]="'both'"
                [icon]="'filter'"
                [showIcon]="'both'"
                [primary]="true"
                [look]="look"
                [disabled]="false"
                [tabIndex]="tabIndex"
                (click)="onClick()">
            </kendo-toolbar-button>
        </kendo-toolbar>
    `
})
class AppComponent {
    public onClick(): void {
        console.log("on click");
    }
}

Toggle Buttons

To render a toggle button in the ToolBar container, add the kendo-toolbar-button tag during initialization and set toggleable to true. For more information, refer to the Button API.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-button
                [text]="'Toggle'"
                [showText]="'both'"
                [showIcon]="'both'"
                [primary]="true"
                [look]="look"
                [disabled]="false"
                [tabIndex]="tabIndex"
                [toggleable]="true"
                [selected]="true"
                (selectedChange)="onChange()">
            </kendo-toolbar-button>
        </kendo-toolbar>
    `
})
class AppComponent {
    public onChange(): void {
        console.log("on change");
    }
}

Button Groups

A ButtonGroup consists of multiple button elements that are visually separated in a group. In the overflow popup of the command, the ButtonGroup is shown as a list of commands.

The ButtonGroup supports single and multiple selection modes. The single selection mode acts as a radio group and allows only one button to be selected at a time. When a user clicks on a button, it becomes selected and all other buttons that are part of the group become unselected. The multiple selection mode allows more than one button to be selected at a time. If the user clicks a button that has been already selected, it will become unselected. By default the selection mode is set to multiple.

To render a ButtonGroup in the ToolBar container, add the kendo-toolbar-buttongroup tag during initialization. You can separately configure each Button in the ButtonGroup by using the kendo-toolbar-button tag.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-buttongroup [selection]="'multiple'">
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-left'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-center'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-right'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-justify'"></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-separator></kendo-toolbar-separator>
            <kendo-toolbar-buttongroup [selection]="'single'">
                <kendo-toolbar-button [toggleable]="true" [icon]="'bold'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'italic'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'underline'"></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
        </kendo-toolbar>
    `
})
class AppComponent { }

Split Buttons

A SplitButton allows the user to execute a default action, which is bound to a button or to choose a predefined action from a drop-down list. To render a SplitButton in the ToolBar container, add the kendo-toolbar-splitbutton tag during initialization. For more information, refer to the SplitButton API.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-splitbutton
                [look]="look"
                [text]="'Paste'"
                [data]="data"
                [icon]="'paste'"
                (buttonClick)="onPaste()"
            >
            </kendo-toolbar-splitbutton>
        </kendo-toolbar>
    `
})
class AppComponent {
    public data: Array<any> = [{
        text: 'Keep Text Only',
        icon: 'paste-plain-text',
        click: () => { console.log('Keep Text Only'); }
    }, {
        text: 'Paste as HTML',
        icon: 'paste-as-html',
        click: () => { console.log('Paste as HTML'); }
    }, {
        text: 'Paste Markdown',
        icon: 'paste-markdown',
        click: () => { console.log('Paste Markdown'); }
    }, {
        text: 'Set Default Paste',
        click: () => { console.log('Set Default Paste'); }
    }];

    public onPaste(): void {
        console.log('Paste');
    }
}

Drop-Down Buttons

The DropDownButton looks like the button. When clicked, it displays a popup list with action items. To render a DropDownButton in the ToolBar container, add the kendo-toolbar-dropdownbutton tag during initialization. For more information, refer to the DropDownButton API.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-dropdownbutton
                [text]="'Paste Variations'"
                [data]="data">
            </kendo-toolbar-dropdownbutton>
        </kendo-toolbar>
    `
})
class AppComponent {
    public data: Array<any> = [{
        text: 'Paste',
        icon: 'paste',
        click: () => { console.log('Paste'); }
    }, {
        text: 'Keep Text Only',
        icon: 'paste-plain-text',
        click: () => { console.log('Keep Text Only'); }
    }, {
        text: 'Paste as HTML',
        icon: 'paste-as-html',
        click: () => { console.log('Paste as HTML'); }
    }, {
        text: 'Paste Markdown',
        icon: 'paste-markdown',
        click: () => { console.log('Paste Markdown'); }
    }, {
        text: 'Set Default Paste',
        click: () => { console.log('Set Default Paste'); }
    }];

    public onPaste(): void {
        console.log('Paste');
    }
}

Separators

You can configure separators to act as delimiters between the ToolBar tools.

@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-button [text]="'Button 1'"></kendo-toolbar-button>
            <kendo-toolbar-separator></kendo-toolbar-separator>
            <kendo-toolbar-button [text]="'Button 2'"></kendo-toolbar-button>
        </kendo-toolbar>
    `
})
class AppComponent { }

In this article