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. Remember that all event captures must be done using the .native modifier.


Examples

#1 Flat
edit

#2 Raised
edit

#3 Button Dropdown
edit
Button dropdowns are similar to selects, but come with different style options and are made to work with the v-app-bar component.

#4 Button Dropdown Variants
edit

#5 Button Toggle
edit
Toggle buttons are essentially styled radio or checkboxes, depending on the properties selected. This component is compatible with the v-app-bar component.

#6 Icon
edit
Icons can be used for the primary content of a button.

#7 App Bar
edit
The application bar is useful for mimicing the design of a native application.

#8 Floating
edit
Floating buttons are round and usually contain an icon.

#9 Loaders
edit
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.

#10 Sizing
edit
Buttons can be given different sizing options to fit a multitude of scenarios.

#11 Outline
edit
Outline buttons inherit their borders from the current color applied.

#12 Round
edit
Rounded buttons behave the same as regular buttons but have rounded edges.

#13 Block
edit
Block buttons extend the full available width.

API

chevron_leftchevron_right