All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

ButtonGroup Overview

The ButtonGroup is a container for two or more Button components.

Each Button in the ButtonGroup can be separately configured depending on the requirements of your project and according to its API reference.

The ButtonGroup is part of the kendo-react-buttons NPM 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

In this article