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.
v-btn is the only component that behaves differently when using the dark prop. Normally components use the dark prop to denote that they have a dark colored background and need their text to be white. While this will work for
v-btn, it is advised to only use the prop when the button IS ON a colored background due to the disabled state blending in with white backgrounds. If you need white text, simply add the white–text class.
block buttons extend the full available width.
depressed buttons still maintain their background color, but have no box shadow.
Floating buttons are rounded and usually contain an icon.
Icons can be used for the primary content of a button. This property makes the button rounded and applies the text prop styles.
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.
outlined buttons inherit their borders from the current color applied.
plain buttons have a lower baseline opacity that reacts to hover and focus.
rounded buttons behave the same as regular buttons but have rounded edges.
Buttons can be given different sizing options to fit a multitude of scenarios.
Text buttons have no box shadow and no background. Only on hover is the container for the button shown. When used with the color prop, the supplied color is applied to the button text instead of the background.
tile buttons behave the same as regular buttons but have no border radius.
raised buttons have a box shadow that increases when clicked. This is the default style.