How to disable Vuetify button without changing colors

Question

I'm using Vuetify's v-btn button component with a variety of colors set via the color prop. Once a user clicks the button, I set disabled to true so they can't click it again, but the button loses its color and gets greyed out.

Is there any way to disable the button without changing its color to grey?

Instead of `disabled` prop can't you just use your custom class with `pointer-events: none`? Then add additional styling to that class if needed (not sure if you still want it to appear clickable and interactive, even when disabled?). Additionally you can use vue's `once` modifier if that helps `@click.once="val = !val"` — Traxo, Jan 04 '19 at 08:09
Thanks! I had never heard of `pointer-events`. That ended up being the easiest solution for me in my case. — Chris, Jan 22 '19 at 13:37

score 41 · Accepted Answer · answered Jan 22 '19 at 13:45

41

Instead of disabled prop you could use your custom class with pointer-events: none, e.g.

.disable-events {
  pointer-events: none
}

<v-btn :class="{'disable-events': customCondition}">

Then add additional styling to that class if needed.

answered Jan 22 '19 at 13:45

Traxo

18,464
4
75
87

Toodoo · Answer 2 · 2019-01-03T21:11:32.620

6

I do it by removing v-btn--disabled and playing with vuetify's css classes.

Still grey but with colored text solution

The button will still be grey, but text will be colored, like that you have a visual effect showing that the button is disabled but still have a colored part.

I, personally, also had some custom opacity to disabled buttons.

HTML

<v-btn id="btnA" :disabled="true" color="success">Success</v-btn>

CSS

button.v-btn[disabled] {
  opacity: 0.6;
}

JS

created(){
    // Trick to remove class after initialising form
    this.$nextTick(() => {
        document.getElementById('btnA').classList.remove('v-btn--disabled')      
    })
}

CodePen

Same display solution

If you really want, the same display you will have to remove [color]--text and add [color] class (and sometimes add white--text class for readability).

JS

created(){
    // Trick to remove class after initialising form
    this.$nextTick(() => {
        document.getElementById('btnA').classList.remove('v-btn--disabled')
        document.getElementById('btnA').classList.remove('success--text')
        document.getElementById('btnA').classList.add('success')
    })
}

CodePen

edited Jan 03 '19 at 21:11

answered Jan 03 '19 at 14:58

Toodoo

8,570
6
35
58

2

For same display after clicking it once and disabling, we could use `vue`'s `.once` modifier? https://codepen.io/anon/pen/WLMmNg Not sure what OP is trying to achieve, question is too vague IMO. – Traxo Jan 04 '19 at 08:17
Thanks @Traxo ! I hadn't heard of `.once`. It wasn't what I needed in my case. I agree that I left my question too vague. There were a lot of things I didn't know. In my case I wanted to allow users to click the buttons as much as they wanted until they submitted the form. Then I didn't want them to be able to click anymore. – Chris Jan 22 '19 at 13:41
Thanks @Toodoo! I didn't end up trying your solution because the comment by @Traxo about adding a class to disable `pointer-events` and styling it the way I wanted ended up being the easiest solution. – Chris Jan 22 '19 at 13:42
why the heck is this not possible via sass variables :D – trainoasis Jan 29 '21 at 13:04

score 2 · Answer 3 · answered Sep 06 '20 at 09:58

As Vuetify allready use important! in .v-btn--disabled it's not possible to just override this class. But with the use of a higher level selector like id (example: #custom-disabled which selects id="custom-disabled") you can. This doesen't keep the original colors but you are at least able to override the class to your liking.

<v-btn :disabled="true" id="custom-disabled">
    Button
</v-btn>

<style>
#custom-disabled.v-btn--disabled {
    background-color: red !important;
}
</style>

For light and dark theme:

<style>
#custom-disabled.v-btn--disabled.theme--light {
    background-color: red !important;
}
#custom-disabled.v-btn--disabled.theme--dark {
    background-color: brown !important;
}
</style>

score 1 · Answer 4 · answered Oct 18 '21 at 13:20

Okay so you can do it by disabling the pointer events as mentioned in other comments but if someone is using a keyboard they can still tab to the control and if you are writing automated tests the button can still be clicked.

You can manually override the style and change the disabled button colour in the css however this will potentially be a problem if you are manually setting the color through the color="" property on v-btn based off a theme (because your application supports branding for different clients for example) because Vuetify doesn't just override the color, it stops adding the color altogether.

So my solution was to simply set the button color via a style attribute and set the important flag (to override the disabled important flag) note that you will need to change the text color as well.

<v-btn
    :style="{
        color: `${getTxtColor()} !important`,
        backgroundColor: `${getBtnColor()} !important`
    }"
    :disabled="status"
    @click="doSomething"
>
  Click Here
</v-btn>

This approach should play nice with testing, themeing, and will not allow users to tab to the button accidentally.

How to disable Vuetify button without changing colors

4 Answers4