Getting Started with KendoReact Button
The KendoReact Button provides a clickable UI functionality and enables you 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 Button is distributed through NPM under the kendo-react-buttons package.
The Button component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.
Basic Usage
The following example demonstrates the Button in action.
- Example
- View Source
- Open In Stackblitz
<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.
- Example
- View Source
- Open In Stackblitz
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')
);