All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

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