@progress/kendo-buttons-react-wrapper/docs/buttongroup/color.md

Kendo UI Buttons wrapper for React

---
title: Color
page_title: Color - ButtonGroup - Kendo UI Wrappers for React
description: "Customize the color of the Kendo UI ButtonGroup wrapper for React."
slug: color_buttongroup
position: 4
---

# Color

You can customize the color of a ButtonGroup.

To achieve this behavior, either:
* Set the `background-color` CSS property of the respective button inline, or
* Define a CSS selector according to the [React convention](https://facebook.github.io/react/docs/dom-elements.html#style).

The following example demonstrates how to set a green color to the ButtonGroup by using the React convention.

```jsx-preview
class ButtonGroupContainer extends React.Component {
    constructor(props) {
        super(props);
        this.btnStyle = {
            backgroundColor: 'green'
        }   
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <ButtonGroup index={0}>
                        <li style={ this.btnStyle }>Green button</li>
                        <li>Option 2</li>
                    </ButtonGroup>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonGroupContainer />,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI ButtonGroup for jQuery](https://demos.telerik.com/kendo-ui/buttongroup/index)
* [API Reference of the ButtonGroup Widget](https://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/buttongroup)