Store

For Enterprise

The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.

Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.

Options

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

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

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

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

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

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

Floating buttons are rounded and usually contain an icon.

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

Outlined buttons inherit their borders from the current color applied.

Rounded buttons behave the same as regular buttons but have rounded edges.

Tile buttons behave the same as regular buttons but have no border radius.

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

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

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!