[Bug Report][3.1.5] props for buttons that are inside v-btn-toggle are not getting applied

[peshanghiwa]

Environment

Vuetify Version: 3.1.5
Vue Version: 3.2.45
Browsers: Chrome 110.0.0.0
OS: Windows 10

Steps to reproduce

Copy/Paste any example of v-btn-toggle component in the official documentation of vuetify and try to add any initial props like color='primary' to the v-btn components, and they don't work and stay transparent until you click on them and make them active

<template>
  <v-app>
    <v-main>
       <v-btn-toggle>
        <v-btn color='primary'> <!-- This color prop doesn't get applied initially until button is clicked -->
          test
        </v-btn>
 	<v-btn color='black'>
          test 2
        </v-btn>
         <v-btn variant='elevated'>
          test 3
        </v-btn>
      </v-btn-toggle>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

Expected Behavior

To have an initial styles/props applied to the buttons regardless of weather the buttons are selected or not

Actual Behavior

The buttons stay as default and do not apply any props up until they are selected

Reproduction Link

https://play.vuetifyjs.com/#...

[yuwu9145]

• When v-btn is independent, color is applied immediately
• When v-btn is inside a group (e.g. v-btn-toggle), color is only applied when it is "activated". All buttons look the same when "unactivated".

This is the default behaviour from the framework

[peshanghiwa]

@yuwu9145 Ok, but what if I initially don't want the button to be white/transparent, but rather has a primary color and on active state change the color to something else.
Basicly have both color and active-color props on the component just like some other vuetify components that have these exact props.

I believe at this I should've flagged this issue as feature request and not a bug report :(

[mayakokits]

• When v-btn is independent, color is applied immediately
• When v-btn is inside a group (e.g. v-btn-toggle), color is only applied when it is "activated". All buttons look the same when "unactivated".

This is the default behaviour from the framework

@yuwu9145 The problem with this default behavior is that when a component using v-btn-toggle is mounted, the toggle doesn't represent the initial state of it's v-model. That's really counter intuitive for users. When something has a default state, as a user I want to see that.

Now when I look at these text alignment examples from the documentation, here it works as I would expect it, the initial state is visible. The examples are using @vuetify/[email protected] – does this mean we can expect it to work like that in v3.2.3 ? Is the change in behavior intended? :-)

[RejownAhmed]

Why isn't this fixed yet? This is deffinitely a bug

[yuwu9145]

Fixed in #19088, use base-color to apply inactive color