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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Separators

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

Example
View Source
Edit In Stackblitz  
Change Theme: