All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

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 widget.

Basic Usage

The following example demonstrates the ButtonGroup in action.

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

Events

The following example demonstrates basic ButtonGroup events. You can subscribe to all ButtonGroup events by the handler name.

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')
);
In this article