Vuetify: [Bug Report] Disabled button dark not visible

Created on 4 Jul 2018 · 4Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.1.1
Vue: 2.5.16
Browsers: Chrome 67.0.3396.99
OS: Linux x86_64

Steps to reproduce

Change disabled button to dark

Expected Behavior

Show like in light or option to change color disabled in dark mode

Actual Behavior

Reproduction Link

https://codepen.io/anon/pen/RJOwNZ?&editors=100

Source

AGPDev

👍5

Most helpful comment

<v-btn color="green lighten-1" :dark="valid" :disabled="!valid">Save</v-btn>
This is my workaround

rromanv on 26 Mar 2019

👍9 😄1

All 4 comments

Sugestion: Use same or equivalent color in both case.

AGPDev on 12 Jul 2018

Dark shouldn't specifically be used to make text white. My rule of thumb is whatever color background the element is on. In this case you should opt to use class="white--text".

johnleider on 15 Sep 2018

👍8

<v-btn color="green lighten-1" :dark="valid" :disabled="!valid">Save</v-btn>
This is my workaround

rromanv on 26 Mar 2019

👍9 😄1

for me, this issue reared it's head when vuetify bumped from 2.1.9 to 2.2.11. What is especially odd: both my Cancel and Save buttons disappeared (an enabled v-btn and a disabled one) but would not re-appear once the validity changed to valid -- did not happen in 2.1.9 but did happen in 2.2.11 Also - I had this issue on a dark background (not light) @rromanv thanks for your great workaround - this fixed it for me