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.

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')
   );

Functionality and Features

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