Button

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.

Usage


API

v-btn

Examples

Flat

Flat buttons have no box shadow and no background. Only on hover is the container for the button shown.


Raised

Raised buttons have a box shadow that increases when clicked. This is the default style.


Depressed

Depressed buttons still maintain their background color, but have no box shadow.


Button Dropdown Variants

Button dropdowns are regular selects with additional styling.

Button Toggle

Toggle buttons are essentially styled radio or checkboxes, depending on the properties selected. This component is compatible with the v-toolbar component.


Icon

Icons can be used for the primary content of a button.


Floating

Floating buttons are round and usually contain an icon.


Loaders

Using the loading prop, you can notify a user that there is processing taking place. The default behavior is to use a v-progress-circular component but this can be customized.


Sizing

Buttons can be given different sizing options to fit a multitude of scenarios.


Outline

Outline buttons inherit their borders from the current color applied.


Round

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


Block

Block buttons extend the full available width.