#Buttons
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
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
#Anatomy
The recommended placement of elements inside of v-btn
is:
- 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 |
#API
Component | Description |
---|---|
v-btn | Primary Component |
#Examples
#Props
#Variant
The variant prop gives you easy access to several different button styles. Available variants are: elevated(default), flat, tonal, outlined, text, and plain.
When a v-btn
is used inside of v-toolbar
and v-app-bar
the default variant text is applied instead of elevated.
#Block
block buttons extend the full available width.
#Flat
flat buttons still maintain their background color, but have no box shadow.
#Icon
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.
#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 with the loader slot.
#Outlined
outlined buttons inherit their borders from the current color applied.
#Plain
plain buttons have a lower baseline opacity that reacts to hover and focus.
#Rounded
Use the rounded prop to control the border radius of buttons.
#Sizing
Buttons can be given different sizing options to fit a multitude of scenarios.