How to disable Vuetify button without changing colors

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.

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

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>