#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.