All Components
Components

Components / Buttons / ButtonGroup

ButtonGroup Overview

The ButtonGroup represents a group of buttons with similar functionalities.

It represents a container for two or more Button components. Depending on the requirements of your project, you can separately configure each Button in the ButtonGroup.

The ButtonGroup wrapper for Vue is a client-side wrapper for the Kendo UI ButtonGroup widget.

Basic Usage

The following example demonstrates the ButtonGroup in action.

<div id="vueapp" class="vue-app">
    <div class="row">
        <kendo-buttongroup>
            <kendo-buttongroup-button>Option A</kendo-buttongroup-button>
            <kendo-buttongroup-button>Option B</kendo-buttongroup-button>
            <kendo-buttongroup-button>Option C</kendo-buttongroup-button>
        </kendo-buttongroup>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp"
})

Features and Functionalities

Events

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

<div id="vueapp" class="vue-app">
    <div class="row">
        <kendo-buttongroup :index="1" @select="onSelect">
            <kendo-buttongroup-button>First option</kendo-buttongroup-button>
            <kendo-buttongroup-button>Second option</kendo-buttongroup-button>
            <kendo-buttongroup-button>Third option</kendo-buttongroup-button>
        </kendo-buttongroup>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp",
    methods: {
        onSelect: function (e) {
            var selectedItemIndex = e.index;
            console.log("The index of the selected button is:" + selectedItemIndex);
        }
    }
})
In this article