All Components

Button Overview

The Button allows the user to achieve a UI functionality by clicking it.

You can configure the appearance of the Button to show only textual content, to display predefined icon, image, or custom icons, or a combination of textual and image content.

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

Basic Usage

The following example demonstrates the Button in action.

<div id="vueapp" class="vue-app">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Default Button</p>
            <p class="k-block">
                <kendo-button @click="onClick">Browse</kendo-button>
                <kendo-button icon="folder" @click="onClick">Browse</kendo-button>
                <kendo-button icon="folder" @click="onClick"></kendo-button>
            </p>
        </div>

        <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Bare Button</p>
            <p class="k-block">
                <kendo-button class="k-bare" @click="onClick">Browse</kendo-button>
                <kendo-button class="k-bare" icon="folder" @click="onClick">Browse</kendo-button>
                <kendo-button class="k-bare" icon="folder" @click="onClick"></kendo-button>
            </p>
        </div>

        <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Flat Button</p>
            <p class="k-block">
                <kendo-button class="k-flat" @click="onClick">Browse</kendo-button>
                <kendo-button class="k-flat" icon="folder" @click="onClick">Browse</kendo-button>
                <kendo-button class="k-flat" icon="folder" @click="onClick"></kendo-button>
            </p>
        </div>

        <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Outline Button</p>
            <p class="k-block">
                <kendo-button class="k-outline" @click="onClick">Browse</kendo-button>
                <kendo-button class="k-outline" icon="folder" @click="onClick">Browse</kendo-button>
                <kendo-button class="k-outline" icon="folder" @click="onClick"></kendo-button>
            </p>
        </div>
    </div>
</div>
Vue.use(ButtonsInstaller);

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

Functionality and Features

Events

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

<div id="vueapp" class="vue-app">
    <div class="row">
        <kendo-button @click="onClick" class="k-primary">Button</kendo-button>
    </div>
</div>
Vue.use(ButtonsInstaller);

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