Vuetify: Global configuration doesn't apply to buttons inside card actions area

Question

The example given at https://vuetifyjs.com/en/features/global-configuration/

createVuetify({
  defaults: {
    VCard: {
      VBtn: { variant: 'outlined' },
    },
  },
})

Seems to only apply to v-buttons in a card when not in the card actions area (the primary area where buttons generally are on a card..). Does anyone know how to form the global configuration to affect buttons in the actions template slot?

I tried the example and found that the global configuration worked with buttons inside card text area, but when moving the button into the actions area the global configuration was lost.

Example:

<v-card>
  <v-card-text>
    <v-btn>Test</v-btn>  <!-- Has 'outlined' variant -->
  </v-card-text>
  <v-card-actions>
    <v-btn>Test2</v-btn>  <!-- Does NOT have 'outlined' variant -->
  </v-card-actions>
</v-card>

Answer 1

Vuetify uses the contextual defaults mechanism internally to set variant="text" on <v-btn> inside <v-card-actions> (see documentation). This will override settings on <v-card>.

You'll have to override the settings for <v-card-actions> seperately:

export const vuetify = createVuetify({
  defaults: {
    VCard: {
      VBtn: { variant: 'outlined' },
    },
    VCardActions: {
      VBtn: { variant: 'outlined' },
    },
  },

Here it is in a playground