Button

v-btn コンポーネントは基本的な HTML におけるボタンをマテリアルデザインで置き換え、多数のオプションを提供します。 様々なカラーヘルパークラスを利用して、背景やテキストの色を変更することができます。

API

props
slots
v-btn
Name
absolute
Default
false
Type
boolean

Components.Buttons.

Name
active-class
Default
'v-btn--active'
Type
string

Components.Buttons.

Name
append
Default
false
Type
boolean

Components.Buttons.

Name
block
Default
false
Type
boolean

ボタンを使用可能なスペースの最大限まで広げます。

Name
bottom
Default
false
Type
boolean

Components.Buttons.

Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
depressed
Default
false
Type
boolean

ボタンの影を削除します。

Name
disabled
Default
false
Type
boolean

Components.Buttons.

Name
exact
Default
false
Type
boolean

Components.Buttons.

Name
exact-active-class
Default
undefined
Type
string

Components.Buttons.

Name
fab
Default
false
Type
boolean

ボタンを丸くします。

Name
fixed
Default
false
Type
boolean

Components.Buttons.

Name
flat
Default
false
Type
boolean

ボタンの背景色を削除します。

Name
href
Default
undefined
Type
string | object

Components.Buttons.

Name
icon
Default
false
Type
boolean

ボタンをアイコンとして丸くフラットにします。

Name
input-value
Default
undefined
Type
any

ボタンの有効状態を制御します。

Name
large
Default
false
Type
boolean

ボタンのサイズを大きくします。

Name
left
Default
false
Type
boolean

Components.Buttons.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
loading
Default
false
Type
boolean

ローディングアニメーションを追加します。

Name
nuxt
Default
false
Type
boolean

Components.Buttons.

Name
outline
Default
false
Type
boolean

ボタンを境界線で表現します。

Name
replace
Default
false
Type
boolean

Components.Buttons.

Name
right
Default
false
Type
boolean

Components.Buttons.

Name
ripple
Default
undefined
Type
boolean | object

Components.Buttons.

Name
round
Default
false
Type
boolean

ボタンの両端が丸くなります。

Name
small
Default
false
Type
boolean

ボタンを小さくします。

Name
tag
Default
'button'
Type
string

Components.Buttons.

Name
target
Default
undefined
Type
string

Components.Buttons.

Name
to
Default
undefined
Type
string | object

Components.Buttons.

Name
top
Default
false
Type
boolean

Components.Buttons.

Name
type
Default
'button'
Type
string

ボタンの属性を設定します。

Name
value
Default
undefined
Type
any

Components.Buttons.

Examples

フラットボタン

フラットボタンは影と背景色を持ちません。ホバーした時のみに、ボタンの形状が表示されます。

レイズドボタン

レイズドボタンはクリックした時に広がる影を持ちます。これはデフォルトのスタイルです。

ディプレスドボタン

ディプレスドボタン背景色は変化しますが、影は持ちません。

ドロップダウン型ボタン

ドロップダウン型ボタンは、付加的なスタイリングがされた一般的な Select です。

アイコン

アイコンをボタンの主要なコンテンツとして使用することができます。

フローティングボタン

フローティングボタンは丸く、多くの場合アイコンを含んでいます。

ローディング

loading prop を使用すれば、処理中であることをユーザーに通知することができます。デフォルトの振る舞いには v-progress-circular コンポーネントが使用されますが、これはカスタマイズすることができます。

サイズ

ボタンにはさまざまなシナリオに合うように、異なったサイズのオプションを設定することができます。

アウトラインボタン

アウトラインボタンは現在適用されている色を引き継いだ境界線を表示します。

ラウンドボタン

ラウンドボタンは通常のボタンと同じように振る舞いますが、角が丸くなります。

ブロックボタン

ブロックボタンは可能な限り横に広がります。

Edit this page | language on Github
 — Contribution Guide
Vuetify 1 has reached EOL and is no longer actively maintained. Upgrade to Vuetify 2.