v-btn を呼び出す基本コード

<template>
  <v-btn>button</v-btn>
</template>

↑Vuetify に定義されている v-btn コンポーネントを呼び出す基本形は、この様な形になります。
このデフォルトの状態で、

・色は #f5f5f5 (薄いグレー)
・font-sizeは 0.875rem (htmlのルートのfont-sizeが16pxなら、14px相当)
・高さが 36px
・最小の横幅が 64px
・クリックした時にリップルエフェクトが付いている

という状態のボタンが生成されます。
htmlとして展開された際の要素は、次のように
button 要素の中に span が入っている形のものが展開されます。

<button type="button" class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default">
  <span class="v-btn__content">button</span>
</button>

ここに、他のコンポーネント同様
いろいろな prop に値を設定して、
カスタマイズして使う事ができる、
というわけです。

実際に表示してみた v-btn のサンプル

実際に動く v-btn のサンプルがあります。
次のリンクより、見ることができます。
Vuetify の v-btn のサンプル

いろいろなボタンを試してみる( v-btn がもつ props を見てみる)

では、 v-btn に指定できる、 prop についていくつか書いていきたいと思います。

色を変える

<template>
  <v-btn color="indigo" class="white--text">button</v-btn>
</template>

↑color という prop を指定すると、ボタンの色が変更できます。
他のコンポーネントと同じく、
指定できる色は、Material Color の色名指定、および css で指定可能な色が使えます。

アイコンだけのボタンに変える

<template>
  <v-btn icon color="indigo">
    <v-icon>mdi-emoticon-happy-outline</v-icon>
  </v-btn>
</template>

↑icon という prop を指定すると、アイコンのみのボタンをつくることができます。
この場合、中に v-icon コンポーネントを内包して使用します。
上記の例では、 Material Desing Icons を使用してアイコンボタンをつくっています。

Vuetify公式 にも書かれていますが、Material Design Icons については、
次のリンク先を読み込むことで使用することができます。

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

フローティングアクションボタンとして使う

<template>
  <v-btn
    class="white--text"
    fab
    color="indigo"
  >
    <v-icon class="white--text">
      mdi-plus
    </v-icon>
  </v-btn>
</template>

↑fab という prop を指定すると、円形のフローティング・アクション・ボタン（FAB）としての使用ができます。

ちなみにフローティング・アクション・ボタンというのは、
これのことですね。
Buttons: floating action button – Material Design

アウトラインスタイル

<template>
  <v-btn outlined color="indigo">
    button
  </v-btn>
</template>

↑outlined という prop を指定すると、外枠線のみを持ったシンプルなデザインに変更できます。

テキストのみの、枠を持たないボタン

<template>
  <v-btn text color="indigo">
    button
  </v-btn>
</template>

↑text という prop を指定すると、テキストのみのシンプルなボタンに変更できます。
シンプルながら、クリックした時のリップルエフェクトはそのまま持っていたり、元々の良さはそのまま残しているので、個人的にはすっきりしていて好きな prop です。

ボタンを角丸にする

<template>
  <v-btn rounded color="indigo" class="white--text">
    button
  </v-btn>
</template>

↑rounded という prop を指定すると、角丸のボタンに変更できます。
いちいち border-radius を使ってclass定義せずとも、用意されているというのはお手軽で良いですね。
（もちろん、cssでのカスタマイズも可能です)

タグの構造上の留意点など

そもそも Vuetify は、 Vue.js 上で動くUIフレームワークである以上、
ページ遷移には router によるリンクを使っていると思うので大丈夫だとは思うのですが、
この v-btn を、aタグで囲うのはやめた方が良い、
ということを、念のため書いておきたいと思います。

どういうことかと言うと、
html5 の仕様上、
実は button タグというものは
aタグで囲ってはいけない
というルールになっています（厳密には）。
厳密には、と言うのは、Chrome等のブラウザでは、buttonタグをaタグで囲ったリンクも動作するにはするのですが、
Firefox等一部のブラウザでは、その仕様が厳密に解釈されて、リンク自体が動作しない場合があるためです。
もちろん、Lintにかけるとエラーが出ることは言うまでもありませんが。

前述の通り、Vue.jsの場合、ページ遷移には
router によるリンクを使用する事が多いと思われるため
あまりないケースだとは思いますが、ごくごく稀に、静的なページに、
CDNを使って Vue や Vuetify を直接読み込んでいたりするページも
あるかもしれないので、念のため書いておくことにしました。
※おそらく、期間が短い単発のキャンペーンページ等では、もしかしたら上記のようなケースもあるかもしれないので。

各種 props を加えたサンプル

いくつかの props を加えたサンプルを、先ほどの基本形の下に作成してあります。
次のリンクより、確認する事ができます。
Vuetify の v-btn のサンプル

公式ドキュメント、APIページなど

v-btn コンポーネントの Vuetify公式ページは以下です。
ボタン・コンポーネント — Vuetify

また、公式APIページはこちらになります。他のコンポーネント同様、設定できる props の一覧が記載されています。
v-btn API — Vuetify

この記事のまとめ

今回は、Vuetify のたくさんのUIコンポーネントの中から、
v-btn についてご紹介しました。

基本的なUIパーツでありながら、
この v-btn は簡単な記述でいろいろな prop を試してみることができるので、
Vuetifyの他のUIコンポーネントを使う際の練習として、
最初に試すのに適しているコンポーネントの1つだと思います。
私自身も、Vuetifyにふれた時はまず、この v-btn 辺りから使ってみた記憶があります。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件