Search code examples
buttoncolorsvuetify.jsdisable

How to disable Vuetify button without changing colors

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?

Solution

  • 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.