All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Button Overview

The Button allows the user to achieve a UI functionality by clicking it.

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

The Button wrapper for React is a client-side wrapper for the Kendo UI Button widget.

Basic Usage

The following example demonstrates the Button in action.

class ButtonContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <Button>Button</Button>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonContainer />,
    document.querySelector('my-app')
);

Features and Functionalities

Events

The following example demonstrates basic Button events. You can subscribe to all Button events by the handler name.

class ButtonContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    onClick = (e) => {
        console.log("Button is clicked");
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <Button click={this.onClick}>Button</Button>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonContainer />,
    document.querySelector('my-app')
);
In this article