@progress/kendo-buttons-react-wrapper/docs/toolbar/index.md

Kendo UI Buttons wrapper for React

---
title: Overview
page_title: Overview - ToolBar - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI ToolBar delivers and use the wrapper in React projects."
slug: overview_toolbar
position: 1
---

# ToolBar Overview

The ToolBar holds various controls such as buttons, groups of buttons, toggle buttons, split buttons, and other customized elements.

The ToolBar wrapper for React is a client-side wrapper for the [Kendo UI ToolBar](http://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar) widget.

## Basic Usage

The following example demonstrates the ToolBar in action.

```jsx-preview
class ToolBarContainer extends React.Component {
    constructor(props) {
        super(props);
        this.toolbarItems = [
            { type: 'button', text: 'Button' },
            { type: 'button', text: 'Toggle Button', togglable: true },
            {
                type: 'splitButton',
                text: 'Insert',
                menuButtons: [
                    { text: 'Insert above', icon: 'insert-up' },
                    { text: 'Insert between', icon: 'insert-middle' },
                    { text: 'Insert below', icon: 'insert-down' }
                ]
            },
            { type: 'separator' },
            { template: '<label for="dropdown">Format:</label>' },
            {
                template: '<input id="dropdown" style="width: 150px;" />',
                overflow: 'never'
            },
            { type: 'separator' },
            {
                type: 'buttonGroup',
                buttons: [
                    { icon: 'align-left', text: 'Left', togglable: true, group: 'text-align' },
                    { icon: 'align-center', text: 'Center', togglable: true, group: 'text-align' },
                    { icon: 'align-right', text: 'Right', togglable: true, group: 'text-align' }
                ]
            },
            {
                type: 'buttonGroup',
                buttons: [
                    { icon: 'bold', text: 'Bold', togglable: true },
                    { icon: 'italic', text: 'Italic', togglable: true },
                    { icon: 'underline', text: 'Underline', togglable: true }
                ]
            },
            {
                type: 'button',
                text: 'Action',
                overflow: 'always'
            },
            {
                type: 'button',
                text: 'Another Action',
                overflow: 'always'
            },
            {
                type: 'button',
                text: 'Something else here',
                overflow: 'always'
            }
        ]
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-12 example-col">
                    <ToolBar items={this.toolbarItems}>
                    </ToolBar>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ToolBarContainer />,
    document.querySelector('my-app')
);
```

## Features and Functionalities

The ToolBar enables you to set its [command types]({% slug command_types_toolbar %}).

## Events

The following example demonstrates basic ToolBar events. You can subscribe to [all ToolBar events](https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar#events) by the handler name.

```jsx
class ToolBarContainer extends React.Component {
    constructor(props) {
        super(props);
        this.toolbarItems = [
            { type: 'button', text: 'Button', id: 0 },
            {
                type: 'splitButton',
                text: 'Insert',
                id: 1,
                menuButtons: [
                    { text: 'Insert above', icon: 'insert-up', id: 2 },
                    { text: 'Insert between', icon: 'insert-middle', id: 3 },
                    { text: 'Insert below', icon: 'insert-down', id: 4 }
                ]
            }
        ]
    }

    onClick = (e) => {
        console.log("The ID of the clicked item is: " + e.id);
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-12 example-col">
                    <ToolBar
                        items={this.toolbarItems}
                        click={this.onClick}>
                    </ToolBar>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ToolBarContainer />,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI ToolBar for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/toolbar/overview)
* [API Reference of the ToolBar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar)