Getting Started with KendoReact ButtonGroup

The KendoReact ButtonGroup is a container for two or more Button components which can be separately configured to display only textual content, or show predefined icons, images, and custom icons, and to render a combination of textual and image content.

The KendoReact ButtonGroup component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-buttons package.

Basic Usage

The following example demonstrates the ButtonGroup in action.

class ButtonGroupContainer extends React.Component {
    render() {
        return (
            <div className="row">
              <div className="col-xs-12 col-sm-6 example-col">
                <p>Text only</p>
                <ButtonGroup>
                  <Button togglable={true}>
                    Bold
                  </Button>
                  <Button togglable={true}>
                    Italic
                  </Button>
                  <Button togglable={true}>
                    Underline
                  </Button>
                </ButtonGroup >
              </div>
              <div className="col-xs-12 col-sm-6 example-col">
                <p>Icons only</p>
                <ButtonGroup >
                    <Button togglable={true} icon="bold"></Button>
                    <Button togglable={true} icon="italic"></Button>
                    <Button togglable={true} icon="underline"></Button>
                </ButtonGroup >
              </div>
              <div className="col-xs-12 col-sm-6 example-col">
                <p>Text + Icons</p>
                <ButtonGroup >
                    <Button togglable={true} icon="bold">Bold</Button>
                    <Button togglable={true} icon="italic">Italic</Button>
                    <Button togglable={true} icon="underline">Underline</Button>
                </ButtonGroup >
              </div>
              <div className="col-xs-12 col-sm-6 example-col">
                <p>Buttons with responsive width</p>
                <ButtonGroup width="300px">
                    <Button togglable={true} icon="bold">Bold</Button>
                    <Button togglable={true} icon="italic">Italic</Button>
                    <Button togglable={true} icon="underline">Underline</Button>
                </ButtonGroup >
              </div>
            </div>
        )
    }
}
ReactDOM.render(
    <ButtonGroupContainer/>,
    document.querySelector('my-app')
);

Functionality and Features

 /