Components / Buttons / ButtonGroup

ButtonGroup Overview

The ButtonGroup represents a group of buttons with similar functionalities.

ButtonGroups act as containers 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"
})

Functionality and Features

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) {
            console.log("Selected button index: " + e.indices);
        }
    }
})

In this article