Components / Buttons

Buttons Overview

The Buttons provide a clickable UI functionality with arbitrary content.

Button

The Button detects user interaction and triggers a corresponding event.
ButtonGroup

The ButtonGroup represents grouped Buttons with identical functionalities.
ToolBar

The ToolBar holds various controls such as buttons and groups of buttons.

Basic Usage

The following example demonstrates how to initialize the Button, ButtonGroup, and ToolBar.

<div id="vueapp" class="vue-app">
    <div class="col-xs-12 col-sm-12 example-col">
        <p>Button</p>
        <kendo-button @click="onButtonClick">Default</kendo-button>
        <kendo-button class="k-primary" @click="onButtonClick">Primary</kendo-button>
        <kendo-button :disabled="true" @click="onButtonClick">Disabled</kendo-button>
    </div>

    <div class="col-xs-12 col-sm-12 example-col">
        <p>ButtonGroup</p>
        <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 class="col-xs-12 col-sm-12 example-col">
        <p>ToolBar</p>
        <kendo-toolbar>
            <kendo-toolbar-item type="button" text="Button"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Toggle Button" :togglable="true"></kendo-toolbar-item>
            <kendo-toolbar-item type="splitButton" text="Insert" :menu-buttons="[
                { text: 'Insert above', icon: 'insert-up' },
                { text: 'Insert between', icon: 'insert-middle' },
                { text: 'Insert below', icon: 'insert-down' }]">
            </kendo-toolbar-item>
            <kendo-toolbar-item type="separator"></kendo-toolbar-item>
            <kendo-toolbar-item type="buttonGroup" :buttons="[
                { icon: 'align-left', text: 'Left', togglable: true, group: 'text-align' },
                { icon: 'align-center', text: 'Center', togglable: true, group: 'text-align' },
                { icon: 'align-right', text: 'Right', togglable: true, group: 'text-align' }]">
            </kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Action" overflow="always"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Another Action" overflow="always"></kendo-toolbar-item>
            <kendo-toolbar-item type="button" text="Something else here" overflow="always"></kendo-toolbar-item>
        </kendo-toolbar>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp",
    methods: {
        onButtonClick: function (ev) {
            console.log("Button clicked!");
        }
    }
})

Installation

To initialize the Buttons, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default

  2. Install the Kendo UI Buttons package for Vue.

    npm install --save @progress/kendo-buttons-vue-wrapper

    The package also exports the following wrappers for individual components:

    • Button
    • ButtonGroup
    • ToolBar

  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'

import { Button,
        ButtonGroup,
        ButtonGroupButton,
        ToolBar,
        ToolBarItem,
        ButtonsInstaller } from '@progress/kendo-buttons-vue-wrapper'

Vue.use(ButtonsInstaller)

new Vue({
   el: '#app',
   components: {
       Button,
       ButtonGroup,
       ButtonGroupButton,
       ToolBar,
       ToolBarItem
   }
})

In this article