How to disable Vuetify button without changing colors

button colors vuetify.js disable
Chris picture Chris · Jan 2, 2019 · Viewed 14.6k times · Source

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?

Answer

Traxo picture Traxo · Jan 22, 2019

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.

Related questions

Android : change button text and background color

How can I change both text and background colors when my button is pressed, with xml ? To change text color I can do : <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="…

Read More
Change button color in AlertDialog

How can I change the color of the button(s) in an AlertDialog in Android?

Read More
How to avoid color changes when button is disabled?

We have a Windows Forms project with quite a few FlatStyle buttons. When we disable the buttons, the colors of the buttons are changed automatically Frown | :( Is it possible to override this somehow, so we can control the colors ourselves?

Read More