All Components

Disabled Button

The business logic of an application often requires a certain button to be temporarily disabled or enabled.

You can configure the Button to be initially disabled by using its enable setting. The component can also be disabled or enabled at any time with JavaScript by using its enable method with a Boolean argument. For more information on the enable method, refer to the Button API.

<div id="vueapp" class="vue-app">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Default Disabled Button</p>
            <p class="k-block">
                <kendo-button class="k-primary" :disabled="true" @click="onClick">Apply</kendo-button>
                <kendo-button :disabled="true" @click="onClick">Cancel</kendo-button>
            </p>
        </div>

        <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Bare Disabled Button</p>
            <p class="k-block">
                <kendo-button class="k-primary k-bare" :disabled="true" @click="onClick">Apply</kendo-button>
                <kendo-button class="k-bare" :disabled="true" @click="onClick">Cancel</kendo-button>
            </p>
        </div>

        <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Flat Disabled Button</p>
            <p class="k-block">
                <kendo-button class="k-primary k-flat" :disabled="true" @click="onClick">Apply</kendo-button>
                <kendo-button class="k-flat" :disabled="true" @click="onClick">Cancel</kendo-button>
            </p>
        </div>

        <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Outline Disabled Button</p>
            <p class="k-block">
                <kendo-button class="k-primary k-outline" :disabled="true" @click="onClick">Apply</kendo-button>
                <kendo-button class="k-outline" :disabled="true" @click="onClick">Cancel</kendo-button>
            </p>
        </div>
    </div>
</div>
Vue.use(ButtonsInstaller);

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