All Components

Badges

The ButtonGroup enables you to apply a badge to each of its buttons.

To achieve this behavior, use the data-badge attribute of the <li> Button element.

<div id="vueapp" class="vue-app">
    <kendo-buttongroup :index="1">
        <kendo-buttongroup-button :data-badge="25">First option</kendo-buttongroup-button>
        <kendo-buttongroup-button :data-badge="50">Second option</kendo-buttongroup-button>
        <kendo-buttongroup-button :data-badge="75">Third option</kendo-buttongroup-button>
    </kendo-buttongroup>
</div>
Vue.use(ButtonsInstaller);

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