[Bug Report][3.0.0-beta.13] v-btn flat and variant="flat" have different behaviour

[stratdev3]

Environment

Vuetify Version: 3.0.0-beta.13 Vue Version: 3.2.40 Browsers: Firefox 105.0 OS: Windows 10

Steps to reproduce

use the link to see the issue

Expected Behavior

flat and variant="flat" should render the same in a

Actual Behavior

• flat is render as text instead of flat
• variant="flat" is correctly render

Reproduction Link

https://codepen.io/cp10/pen/jOxQbPE?editors=1010

[jacekkarczmarczyk]

<VCardActions> provides default variant prop for VBtn, not sure if that's intended, imho it shouldn't be there

https://github.com/vuetifyjs/vuetify/blob/next/packages/vuetify/src/components/VCard/VCardActions.tsx#L13

[nekosaur]

It's intended, talk to @johnleider :>

[stratdev3]

VCardAction.VBtn.variant is text by default, i'm ok with this.

But rendering with flat flag or variant = "flat" should be the same ? If not a little bit confusing...

[KaelWD]

Not sure why flat was kept. There seems to be three separate ways this is modified instead of just using the variant system:

• variant="elevated" - applies both v-btn--elevated (hover/active shadow) and v-btn--variant-elevated (base shadow)
• variant="flat" - applies v-btn--variant-flat which has no shadow, and removes v-btn--elevated
• flat - replaces v-btn--elevated with v-btn--flat which overrides shadow to none
• elevation="0" - applies elevation-0 which overrides shadow to none

[stratdev3]

Agree. Same problem in other components where flat flag was kept or maybe not deleted since v3 rewrite.

I prefer the new variant syntax.

[johnleider]

The flat flag was used / intended for components that did not support variants but had a default elevation.

[stratdev3]

What about adding a note in the documentation ? to clarify flat != variant flat