All Components

Button Overview

The Kendo UI Button is a React component that allows the user to achieve a UI functionality by clicking on it.

You can configure the appearance of the Button to show only textual content, to display predefined icon, image, or custom icons, or yet a combination of textual and image content.

The Button is part of the kendo-react-buttons NPM package.

Basic Usage

The following example demonstrates the Button in action.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   <style>
     .k-button + .k-button {
         margin-left: 5px
     }
   </style>
class ButtonContainer extends React.Component {
       render() {
           return (
               <div className="row example-wrapper">
                 <div className="col-xs-12 col-sm-6 example-col">
                   <p>Default Buttons</p>
                   <p>
                     <Button >Browse</Button>
                     <Button icon="folder">Browse</Button>
                     <Button icon="folder"></Button>
                   </p>
                   <p>
                     <Button disabled={true}>Browse</Button>
                     <Button icon="folder" disabled={true}>Browse</Button>
                     <Button icon="folder" disabled={true}></Button>
                   </p>
                 </div>

                 <div className="col-xs-12 col-sm-6 example-col">
                   <p>Primary Buttons</p>
                   <p>
                     <Button primary={true}>Browse</Button>
                     <Button icon="folder" primary={true}>Browse</Button>
                     <Button icon="folder" primary={true}></Button>
                   </p>
                   <p>
                     <Button primary={true} disabled={true}>Browse</Button>
                     <Button icon="folder" primary={true} disabled={true}>Browse</Button>
                     <Button icon="folder" primary={true} disabled={true}></Button>
                   </p>
                 </div>

                 <div className="col-xs-12 col-sm-6 example-col">
                   <p>Bare Buttons</p>
                   <p>
                     <Button look="bare">Browse</Button>
                     <Button icon="folder" look="bare">Browse</Button>
                     <Button icon="folder" look="bare"></Button>
                   </p>
                   <p>
                     <Button look="bare" disabled={true}>Browse</Button>
                     <Button icon="folder" look="bare" disabled={true}>Browse</Button>
                     <Button icon="folder" look="bare" disabled={true}></Button>
                   </p>
                 </div>

                 <div className="col-xs-12 col-sm-6 example-col">
                   <p>Primary Bare Buttons</p>
                   <p>
                     <Button primary={true} look="bare">Browse</Button>
                     <Button icon="folder" primary={true} look="bare">Browse</Button>
                     <Button icon="folder" primary={true} look="bare"></Button>
                   </p>
                   <p>
                     <Button primary={true} look="bare" disabled={true}>Browse</Button>
                     <Button icon="folder" primary={true} look="bare" disabled={true}>Browse</Button>
                     <Button icon="folder" primary={true} look="bare" disabled={true}></Button>
                   </p>
                 </div>

                 <div className="col-xs-12 col-sm-6 example-col">
                   <p>Flat Buttons</p>
                   <p>
                     <Button look="flat">Browse</Button>
                     <Button icon="folder" look="flat">Browse</Button>
                     <Button icon="folder" look="flat"></Button>
                   </p>
                   <p>
                     <Button look="flat" disabled={true}>Browse</Button>
                     <Button icon="folder" look="flat" disabled={true}>Browse</Button>
                     <Button icon="folder" look="flat" disabled={true}></Button>
                   </p>
                 </div>

                 <div className="col-xs-12 col-sm-6 example-col">
                   <p>Primary Flat Buttons</p>
                   <p>
                     <Button primary={true} look="flat">Browse</Button>
                     <Button icon="folder" primary={true} look="flat">Browse</Button>
                     <Button icon="folder" primary={true} look="flat"></Button>
                   </p>
                   <p>
                     <Button primary={true} look="flat" disabled={true}>Browse</Button>
                     <Button icon="folder" primary={true} look="flat" disabled={true}>Browse</Button>
                     <Button icon="folder" primary={true} look="flat" disabled={true}></Button>
                   </p>
                 </div>

                 <div className="col-xs-12 col-sm-6 example-col">
                   <p>Outline Buttons</p>
                   <p>
                     <Button look="outline">Browse</Button>
                     <Button icon="folder" look="outline">Browse</Button>
                     <Button icon="folder" look="outline"></Button>
                   </p>
                   <p>
                     <Button look="outline" disabled={true}>Browse</Button>
                     <Button icon="folder" look="outline" disabled={true}>Browse</Button>
                     <Button icon="folder" look="outline" disabled={true}></Button>
                   </p>
                 </div>

                 <div className="col-xs-12 col-sm-6 example-col">
                   <p>Primary Outline Buttons</p>
                   <p>
                     <Button primary={true} look="outline">Browse</Button>
                     <Button icon="folder" primary={true} look="outline">Browse</Button>
                     <Button icon="folder" primary={true} look="outline"></Button>
                   </p>
                   <p>
                     <Button primary={true} look="outline" disabled={true}>Browse</Button>
                     <Button icon="folder" primary={true} look="outline" disabled={true}>Browse</Button>
                     <Button icon="folder" primary={true} look="outline" disabled={true}></Button>
                   </p>
                 </div>

                 <div className="col-xs-12 example-col">
                   <p>Icon Types</p>
                   <Button icon="calendar">Kendo UI Font Icon</Button>
                   <Button iconClass="fa fa-calendar fa-fw">Font Awesome Icon</Button>
                   <Button imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Image Icon</Button>
                 </div>
               </div>
           );
       }
   }
   ReactDOM.render(
       <ButtonContainer/>,
       document.querySelector('my-app')
   );

Features and Functionalities

Events

The following example demonstrates basic Button events.

class EventLog extends React.Component {
       renderLogs = () => {
           return this.props.logs.map((log, index)=> {
               return(<li key={index}>{log}</li>)
           })
       }
       render() {
           return(
               <div className="example-config">
                 <h5>{this.props.title}</h5>
                 <ul className="event-log">
                   {this.renderLogs()}
                 </ul>
               </div>
           )
       }
   }
   class ButtonContainer extends React.Component {
       constructor(props) {
           super(props);

           this.state = {
               logs: []
           };
       }

       handleDomEvent = (event) => {
           let logs = this.state.logs.slice();

           logs.unshift(event.type)

           this.setState({logs: logs})
       }
       render() {
           return ([
               <Button
                   onClick={this.handleDomEvent}
                   onMouseDown={this.handleDomEvent}
                   onMouseUp={this.handleDomEvent}
                   onFocus={this.handleDomEvent}
                   onBlur={this.handleDomEvent}
                   onKeyPress={this.handleDomEvent}
               >
                   My Button
               </Button>,
               <EventLog title="Event Log" logs={this.state.logs}/>
           ])
       }
   }
   ReactDOM.render(
       <ButtonContainer/>,
       document.querySelector('my-app')
   );
In this article