@progress/kendo-buttons-react-wrapper/docs/button/index.md

Kendo UI Buttons wrapper for React

---
title: Overview
page_title: Overview - Button - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI Button delivers and use the wrapper in React projects."
slug: overview_button
position: 1
---

# 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](http://docs.telerik.com/kendo-ui/api/javascript/ui/button) widget.

## Basic Usage

The following example demonstrates the Button in action.

```jsx-preview
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

* [Disabled buttons]({% slug disabled_state_button %})
* [Icon buttons]({% slug icons_button %})

## Events

The following example demonstrates basic Button events. You can subscribe to [all Button events](https://docs.telerik.com/kendo-ui/api/javascript/ui/button#events) by the handler name.

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

## Suggested Links

* [Kendo UI Button for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/button/overview)
* [API Reference of the Button Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/button)