---
title: Overview
position: 1
seo_title: Overview of the ToolBar Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
ToolBar component, its variants, anatomy, and the available options in its
live demo, and master its appearance by setting the size.
---
## ToolBar Overview
A ToolBar is a user interface (UI) element that represents a container, wrapping groups of related actions or commands of equal importance in the form of buttons, menus, checkboxes, search bars, and more.
The ToolBar displays items horizontally, usually in a single line or column. However, when too many items cannot fit within the available space, an overflow button appears.
### Live Demo
### Appearance
The Telerik and Kendo UI ToolBar component supports alternative styling options which enable you to configure the individual aspects of its appearance.
#### Anatomy
The anatomy of the ToolBar summarizes the elements of the component.
Depending on the elements they display, the Telerik and Kendo UI ToolBars can be any of the following types:
* ToolBar—The ToolBar displays items that fit its width.
* Responsive ToolBar—The ToolBar renders a dropdown button that hides the items that do not fit its width in an overflow popup.
* Wrapped ToolBar—The ToolBar distributes the items vertically according to its width.
The next image shows the anatomy of a ToolBar and includes the following elements:
#### Size
The ToolBar provides the `size` configuration option that enables you to control how big or small the rendered toolbar will be. ToolBars also provide options for size customization.
`size` provides the following available options:
* `small`—Renders a small ToolBar, which contains small components as its items. Small ToolBars are suitable when the available space is limited.
The small Telerik and Kendo UI ToolBar achieve the desired height by applying a `$kendo-spacing, 1` spacing value for their paddings.
* `medium` (default)—Renders a medium ToolBar.
The `medium` size configuration is the base according to which the `small` and `large` options are specified. The medium Telerik and Kendo UI ToolBar contains components in their default medium size and applies a `$kendo-spacing, 2` spacing value for their paddings.
* `large`—Renders a large ToolBar, which is suitable for adaptive components and mobile devices.
The large Telerik and Kendo UI ToolBar achieves the recommended touch area dimensions both by wrapping components in large sizes and applying a `$kendo-spacing, 2.5` value for their paddings.
* `null`—Removes the styling related to the `size` option. Not setting a `size` allows you to add your own, custom value.
### Framework-Specific Documentation
For specific information about the component, refer to its official product documentation:
