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

Kendo UI Buttons wrapper for React

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

# ButtonGroup Overview

The ButtonGroup represents a group of buttons with similar functionalities.

It represents a container for two or more Button components. Depending on the requirements of your project, you can separately configure each Button in the ButtonGroup.

The ButtonGroup wrapper for React is a client-side wrapper for the [Kendo UI ButtonGroup](https://demos.telerik.com/kendo-ui/buttongroup/index) widget.

## Basic Usage

The following example demonstrates the ButtonGroup in action.

```jsx-preview
class ButtonGroupContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <ButtonGroup>
                        <li>Option 1</li>
                        <li>Option 2</li>
                    </ButtonGroup>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonGroupContainer />,
    document.querySelector('my-app')
);
```

## Features and Functionalities

* [Preselected buttons]({% slug preselected_buttons_buttongroup %})
* [Icon ButtonGroup]({% slug icons_buttongroup %})
* [Color]({% slug color_buttongroup %})
* [Badges]({% slug badges_buttongroup %})

## Events

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

```jsx
class ButtonGroupContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    onSelect = (e) => {
        console.log("The index of the selected button is: " + e.index);
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <ButtonGroup select={this.onSelect}>
                        <li>Option 1</li>
                        <li>Option 2</li>
                    </ButtonGroup>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonGroupContainer />,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI ButtonGroup for jQuery](https://demos.telerik.com/kendo-ui/buttongroup/index)
* [API Reference of the ButtonGroup Widget](https://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/buttongroup)