New to Kendo UI for AngularStart 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.

Change Theme
Theme
Loading ...

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

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

Separators

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

Change Theme
Theme
Loading ...

Spacer

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

Change Theme
Theme
Loading ...