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

Kendo UI Buttons wrapper for React

---
title: Overview
page_title: Buttons Overview - Components - Kendo UI Wrappers for React
description: "Learn about the Kendo UI components for React which are delivered by the Buttons package."
slug: overview_buttons
position: 0
---

# Buttons Overview

The Buttons provide a clickable UI functionality with arbitrary content.

<div class="row components-overview-list mt-70 mb-50 pb-50 separator-bottom">
<a href="{% slug overview_button %}" class="col-md-4">
<svg id="button" viewbox="0 0 72 72">
  <defs>
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="-5.1381" y1="58.1737" x2="75.1381" y2="11.8263">
        <stop  offset="0" style="stop-color:#FF9B5E"/>
        <stop  offset="8.618834e-02" style="stop-color:#FF8C5D"/>
        <stop  offset="0.1949" style="stop-color:#FF7F5B"/>
        <stop  offset="0.3" style="stop-color:#FF7B5B"/>
        <stop  offset="0.7" style="stop-color:#FF6358"/>
        <stop  offset="0.7835" style="stop-color:#FC5F59"/>
        <stop  offset="0.8701" style="stop-color:#F4525E"/>
        <stop  offset="0.9577" style="stop-color:#E63E65"/>
        <stop  offset="1" style="stop-color:#DD3169"/>
    </linearGradient>
  </defs>
  <path d="M57,48H15v6h36L57,48z M0,30v42h72V30H0z M66,66H6V36h60V66z" />
</svg>
<div class="h4 mt-10 mb-5">Button</div>
<p>The Button detects user interaction and triggers a corresponding event.</p>

</a>
<a href="{% slug overview_buttongroup %}" class="col-md-4">
<svg id="buttongroup" viewbox="0 0 72 72">
  <path d="M0,30v42h69V30H0z M42,36v30H27V36H42z M6,36h15v30H6V36z M63,66H48V36h15V66z" />
</svg>
<div class="h4 mt-10 mb-5">ButtonGroup</div>
<p>The ButtonGroup represents grouped Buttons with identical functionalities.</p>
</a>
<a href="{% slug overview_toolbar %}" class="col-md-4">
<svg id="toolbar" viewbox="0 0 72 72">
  <path d="M12,12h12v6H12V12z M30,18h12v-6H30V18z M48,18h12v-6H48V18z M72,0v60L60,72H0V0H72z M6,24h60V6H6V24z M66,57.6  V30H6v36h51.6L66,57.6z" />
</svg>
<div class="h4 mt-10 mb-5">ToolBar</div>
<p>The ToolBar holds various controls such as buttons and groups of buttons.</p>
</a>

</div>

## Basic Usage

The following example demonstrates the Button, ButtonGroup, and ToolBar components in action.

```jsx-preview
class ButtonsContainer 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 }
                ]
            }
        ]
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <Button>Button</Button>
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                    <ButtonGroup>
                        <li>Option A</li>
                        <li>Option B</li>
                        <li>Option C</li>
                    </ButtonGroup>
                </div>
                <div className="col-xs-12 col-sm-12 example-col">
                    <ToolBar items={this.toolbarItems}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonsContainer />,
    document.querySelector('my-app')
);
```

## Installation

All components that you reference during the installation will be present in the final bundle of your application. To avoid ending up with components you do not actually need, import from the package only the desired component.

1. Download and install the package.

    ```sh
        npm install --save @progress/kendo-buttons-react-wrapper
    ```

2. Once installed, import the desired component from the package.

    ```sh
        import { Button } from '@progress/kendo-buttons-react-wrapper';
    ```

    The package also exports the following individual components:

      * Button
      * ButtonGroup
      * ToolBar

3. You are required to install one of the Kendo UI themes to style your components.

## Dependencies

The Buttons package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

* @progress/kendo-ui

## Suggested Links

* [Get Started with the Button]({% slug overview_barcode %})
* [Get Started with the ButtonGroup]({% slug overview_qrcode %})
* [Get Started with the Toolbar]({% slug overview_qrcode %})