All Components

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.
<div id="vueapp" class="vue-app">
    <div class="row">
        <div class="demo-section k-content">
            <kendo-buttongroup :index="1">
                <kendo-buttongroup-button style="background-color: green">First option</kendo-buttongroup-button>
                <kendo-buttongroup-button style="background-color: red">Second option</kendo-buttongroup-button>
                <kendo-buttongroup-button style="background-color: blue">Third option</kendo-buttongroup-button>
            </kendo-buttongroup>
        </div>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp"
})
In this article