Vuetify: disabled fab button is invisible

Created on 18 Jul 2017 · 3Comments · Source: vuetifyjs/vuetify

Steps to reproduce

put fab button in disabled state on the page

Versions

Chrome 50, Edge 14

What is expected ?

Disabled grayed floating button

What is actually happening ?

button is invisible.

Reproduction Link

https://codepen.io/milleraa/pen/eRaGVL

invalid

Source

milleraa

Most helpful comment

Disabled fab button with "white--text" looks bad.
I use this solve it:

<v-btn fab class="indigo" :disabled="disabledCondition">
    <v-icon :class="[{'white--text': !disabledCondition }]">delete</v-icon>
</v-btn>

milleraa on 19 Jul 2017

👍2

All 3 comments

You have the button designated as dark, which means that when disabled it should have a 12% #FFF color as designated here https://material.io/guidelines/components/buttons.html#buttons-raised-buttons.

My suggestion would be to add the class "white--text" and remove the dark prop designation.

johnleider on 18 Jul 2017

👍2

Disabled fab button with "white--text" looks bad.
I use this solve it:

<v-btn fab class="indigo" :disabled="disabledCondition">
    <v-icon :class="[{'white--text': !disabledCondition }]">delete</v-icon>
</v-btn>

milleraa on 19 Jul 2017

👍2

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord