All Components

Keyboard Navigation

The keyboard navigation of the Button is always available.

The Button supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Enter Triggers the click event.
Space Triggers the click event.

The following example demonstrates how to enable the keyboard navigation of the Button.

<div id="vueapp" class="vue-app">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 example-col">
            <p>Primary button</p>
            <kendo-button class="k-primary" @click="onClick">Submit</kendo-button>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4 example-col">
            <p>Image button</p>
            <kendo-button image-url="https://demos.telerik.com/kendo-ui/content/web/16x16/Chart.png" @click="onClick">Chart</kendo-button>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4 example-col">
            <p>Disabled button</p>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
            <kendo-button sprite-css-class="fa fa-calendar fa-fw" :disabled="true" @click="onClick">Calendar</kendo-button>
        </div>
    </div>
</div>
Vue.use(ButtonsInstaller);

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