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

Kendo UI Buttons wrapper for React

---
title: Command Types
page_title: Command Types - ToolBar - Kendo UI Wrappers for React
description: "Configure and implement the desired command types of the Kendo UI ToolBar wrapper for React."
slug: command_types_toolbar
position: 2
---

# Command Types

The ToolBar provides the various types of commands which you can use inside the component.

The available command types are:

* Button
* Toggle button
* Split button
* Group of buttons
* Separator
* Custom templates

For more details, refer to the documentation on the [Kendo UI ToolBar for jQuery](http://docs.telerik.com/kendo-ui/controls/navigation/toolbar/overview#command-types).

```jsx-preview
class ToolBarContainer extends React.Component {
    constructor(props) {
        super(props);
        this.toolbarItems = [
            { type: 'button', text: 'Button' },
            {
                type: 'splitButton',
                text: 'splitButton',
                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">Template:</label>' },
            {
                template: '<input id="dropdown" style="width: 150px;" />',
                overflow: 'never'
            },
            {
                type: 'buttonGroup',
                buttons: [
                    { icon: 'align-left', text: 'buttonGroup Left', togglable: true, group: 'text-align' },
                    { icon: 'align-center', text: 'buttonGroup Center', togglable: true, group: 'text-align' },
                    { icon: 'align-right', text: 'buttonGroupRight', togglable: true, group: 'text-align' }
                ]
            }
        ]
    }

    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')
);
```

## Suggested Links

* [Kendo UI ToolBar for jQuery](http://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)