Button Overview

The KendoReact Button 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')
);
 /