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.
The recommended placement of elements inside of
- Place text in the center
- Place visual content around container text
|Element / Area||Description|
|1. Container||In addition to text, the Button container typically holds a v-icon component|
|2. Icon (optional)||Leading media content intended to improve visual context|
|3. Text||A content area for displaying text and other inline elements|
The variant prop gives you easy access to several different button styles. Available variants are: elevated(default), flat, tonal, outlined, text, and plain.
v-btn is used inside of
v-app-bar the default variant text is applied instead of elevated.
block buttons extend the full available width.
flat buttons still maintain their background color, but have no box shadow.
Icons can be used for the primary content of a button. Use the icon prop to either supply an icon in the default slot, or to directly use an icon.
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 with the loader slot.
outlined buttons inherit their borders from the current color applied.
plain buttons have a lower baseline opacity that reacts to hover and focus.
Use the rounded prop to control the border radius of buttons.
Buttons can be given different sizing options to fit a multitude of scenarios.