All Components

Selection

The ButtonGroup enables you to define a single or multiple selection.

Single Selection

The following example demonstrates a single selection of buttons within the ButtonGroup.

<div id="vueapp" class="vue-app">
    <div class="row">
        <kendo-buttongroup :selection="'single'">
            <kendo-buttongroup-button data-icon="align-left">Option A</kendo-buttongroup-button>
            <kendo-buttongroup-button data-icon="align-center">Option B</kendo-buttongroup-button>
            <kendo-buttongroup-button data-icon="align-right">Option C</kendo-buttongroup-button>
        </kendo-buttongroup>
    </div>
</div>
Vue.use(ButtonsInstaller);

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

Multiple Selection

The following example demonstrates a multiple selection of buttons within the ButtonGroup.

<div id="vueapp" class="vue-app">
    <div class="row">
        <kendo-buttongroup :selection="'multiple'">
            <kendo-buttongroup-button data-icon="bold"></kendo-buttongroup-button>
            <kendo-buttongroup-button data-icon="italic"></kendo-buttongroup-button>
            <kendo-buttongroup-button data-icon="underline"></kendo-buttongroup-button>
        </kendo-buttongroup>
    </div>
</div>
Vue.use(ButtonsInstaller);

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