# Control Types

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

## Button Controls

The ToolBar supports the following button-type controls:

<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#buttons">
      <ComponentTitle>Buttons</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Add standard buttons to execute actions in the ToolBar.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#toggle-buttons">
      <ComponentTitle>Toggle Buttons</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Create buttons with toggleable on/off states for binary choices.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#button-groups">
      <ComponentTitle>Button Groups</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Group multiple buttons together with single or multiple selection modes.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#split-buttons">
      <ComponentTitle>Split Buttons</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Combine a default action button with a dropdown list of predefined actions.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#drop-down-buttons">
      <ComponentTitle>Drop-Down Buttons</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Display a popup list with action items when the button is clicked.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#separators">
      <ComponentTitle>Separators</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Add visual delimiters between ToolBar tools for better organization.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#spacer">
      <ComponentTitle>Spacer</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Insert flexible space between ToolBar tools to control layout alignment.</ComponentDescription>
    </Component>
  </Column>
</Row>

### 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](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarbuttoncomponent).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/control-types/buttons/source.txt)

### Toggle Buttons

To render a toggle button in the ToolBar container, add the `kendo-toolbar-button` tag during initialization and set [toggleable](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarbuttoncomponent#toggleable) to `true`. For more information, refer to the [ToolBarButton API](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarbuttoncomponent).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/control-types/toggle-buttons/source.txt)

### 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.

* [ToolBarButtonGroup API](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarbuttongroupcomponent)
* [ToolBarButton API](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarbuttoncomponent)

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/control-types/button-groups/source.txt)

### 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](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarsplitbuttoncomponent).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/control-types/split-buttons/source.txt)

### 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](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbardropdownbuttoncomponent).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/control-types/dropdown-buttons/source.txt)

## Separators

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/control-types/separators/source.txt)

## Spacer

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/control-types/spacer/source.txt)

## Suggested Links

* [Implementing Custom Control Types](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/toolbar/custom-control-types)
* [API Reference of the ToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api)
* [API Reference of the ToolBarButton](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarbuttoncomponent)
* [API Reference of the ToolBarButtonGroup](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarbuttongroupcomponent)
* [API Reference of the ToolBarSplitButton](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarsplitbuttoncomponent)
* [API Reference of the ToolBarDropDownButton](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbardropdownbuttoncomponent)