Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report][3.0.0-beta.1] VButton does not style `:disabled` correctly with color on variant="outlined"

See original GitHub issue

Environment

Vuetify Version: 3.0.0-beta.1 Vue Version: 3.2.36 Browsers: Chrome 101.0.4951.67 OS: Windows 10

Steps to reproduce

Open https://codepen.io/andrewspy/pen/dydZbgg
See the VButton with variant="outlined" and color="primary"

Expected Behavior

Disabled button should not have primary color

Actual Behavior

Disabled button styled with primary color

Reproduction Link

https://codepen.io/andrewspy/pen/dydZbgg

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

3reactions

zorn-vcommented, May 30, 2022

For variant that doesn’t color filled the button (such as outlined, and text), I would suggest it should always “grey” out instead of “color muted” as it doesn’t fit well with the overall contrast when disabled.

Agree, muted color is better only if button have bg color. If it “text” or “outlined” - grey is better.

2reactions

andrewspycommented, May 29, 2022

@KaelWD For variant that doesn’t color filled the button (such as outlined, and text), I would suggest it should always “grey” out instead of “color muted” as it doesn’t fit well with the overall contrast when disabled.

While using <v-btn :disabled="isDisabled" :color="isDisabled ? '' : 'regularColor'"> is possible, it does impact the DX as we are introducing additional computed isDisabled.

Just my opinion.