New to Kendo UI for Angular? Start a free 30-day trial

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 ToolBarButton API.

Example
View Source
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 ToolBarButton API.

Example
View Source
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
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 ToolBarSplitButton API.

Example
View Source
Change Theme:

Drop-Down Buttons

When the DropDownButton is 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 ToolBarDropDownButton API.

Example
View Source
Change Theme:

Separators

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

Example
View Source
Change Theme:

Spacer

You can add a spacers to take up all available space between ToolBar tools.

Example
View Source
Change Theme: