Disabled ButtonGroup

You can enable or disable the KendoReact ButtonGroup.

By default, the component is enabled. To disable the whole group of buttons, set the disabled property of the ButtonGroup to true.

To disable a specific button, set its own disabled property to true and leave the disabled property of the ButtonGroup undefined. If you define the disabled property of the ButtonGroup, it will take precedence over the disabled attributes of the underlying buttons and they will be ignored.

The following example demonstrates how to disable the ButtonGroup.

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

        this.state = {
            disabled: false
        };
    }
    handleDisable = () => {
        this.setState({disabled: !this.state.disabled});
    }
    render() {
        const { disabled } = this.state;

        return (
            <div className="example-wrapper">
                <ButtonGroup disabled={disabled}>
                    <Button
                        togglable={true}
                    >Option A</Button>
                    <Button
                        togglable={true}
                    >Option B</Button>
                </ButtonGroup> &nbsp;
                <Button onClick={this.handleDisable}>Toggle disabled</Button>
            </div>
        )
    }
}
ReactDOM.render(
    <ButtonGroupContainer/>,
    document.querySelector('my-app')
);

In this article

 /