（以前社内ブログに投稿していた記事の再掲です）

v-card-actions内にv-btnを配置した際のスタイルについてです。

Vuetify3 Beta環境で素直にやってみると、思っていた動きと違ったので注意点をまとめました。

2023/09/23 追記

Beta版じゃなくなったことで、以前書いた記事より仕様が変更になっていましたので,
Vuetify3の仕様に合わせて更新してます。

具体的には、variant=”contained”が書けなくなりAPIに記載されている状態を直接指定する形に変更になっています。

やりたいこと

以下のような感じの画面を作りたいと思います。

v-cardを使用して、下部にボタンを配置するような感じです。

問題点

上記のような画面を作りたいとき、v-card-actions内にv-btnを配置すれば良いのでは？と思う方が多いと思います。

実際それで良いのですが、普通にボタンを配置したときに表示が思っていたのと違う…なんて経験ないでしょうか。

例えば以下のようにボタンを配置した時、画像のようなボタンが表示されます。

sample.vue

<v-card-actions class="justify-end" >
  <v-btn color="black">button1</v-btn>
  <v-btn color="black">button2</v-btn>
</v-card-actions>

ここで、あれ？と思われる方が多いと思います。

v-btnコンポーネントは通常デフォルトで以下のようにボタンらしい見た目で表示されますが、

v-card-actions内に配置した場合は上の画像みたいに文字だけのようなボタンが表示されてしまいます。

通常のデフォルトボタン

解決方法

結論から言うと、これは仕様です。詳しくはこちらを参照してみてください。

普通にボタンコンポーネントを配置すると、~~variantがデフォルトでcontainedとなっているのですが~~、v-card-actions内に配置した場合のみ、variantがデフォルトでtextとなるようです。

~~そのため、variant=”contained”を指定することで目的の挙動が確認できます。~~

追記

variantからcontainedが消え、elevatedに変わったようです。

variant=”elevated”と指定してあげることで解決します。
また、公式の項目を設定することで意図したボタンの見た目に変えることが可能です。

sample.vue

<v-card-actions class="justify-end" >
  <v-btn color="black" variant="elevated">button1</v-btn>
  <v-btn color="black" variant="elevated">button2</v-btn>
</v-card-actions>

また、ボタン回りの陰影も削除されるようですので、通常のボタンのようにボタン回りに陰影を付けたい場合はelevation=”3″を追加すると通常のデフォルト状態のボタンと同様の見た目が作れます。

追記

elevatedを指定した場合、影は消えていないようですので以下の対応は不要そうです。

影を無くしたボタンにしたい場合は、flatを指定しましょう！

sample.vue

<v-card-actions class="justify-end" >
  <v-btn variant="contained" elevation="3">button1</v-btn>
  <v-btn variant="contained" elevation="3">button2</v-btn>
</v-card-actions>

これで目的のボタンのようなv-btnをv-card-actions内に配置することができました。

参考

https://github.com/vuetifyjs/vuetify/issues/14845