vue.jsvuetify.jsvuetifyjs3

overide plain styling on <v-card-actions>

I'm using Vuetify. This is the basic setup for a <v-card> component:

<template>
  <v-card>
    <v-card-title>MyCard</v-card-title>
    <v-card-text></v-card-text>
    <v-card-actions>
      <v-btn>Revert</v-btn>
      <v-spacer/>
      <v-btn>Cancel</v-btn>
      <v-btn>Save</v-btn>
    </v-card-actions>
  </v-card>
<template>

This is a very basic setup, however all the buttons in the section end up styled as if they had the plain attribute passed:

<v-btn plain>Revert</v-btn>

Example of button result

How do I get a "regularly" styled button in my v-card-actions sections?

Example of Vuetify 'regular' styling:

Example of regular styled button

Solution

  • Do you mean like this?

    Since v-btn inside the v-card will be added as plain button, just update the variant to flat should be ok.

    <v-btn color="primary" variant="flat">Cancel</v-btn>

    playground