# 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.
# API
# Caveats
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.
# Examples
# Props
# Block
block buttons extend the full available width.
# Depressed
depressed buttons still maintain their background color, but have no box shadow.
# Floating
Floating buttons are rounded and usually contain an icon.
# Icon
Icons can be used for the primary content of a button. This property makes the button rounded and applies the text prop styles.
# 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.
# 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
rounded buttons behave the same as regular buttons but have rounded edges.
# Sizing
Buttons can be given different sizing options to fit a multitude of scenarios.
# Text
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
tile buttons behave the same as regular buttons but have no border radius.
# Misc
# Raised
raised buttons have a box shadow that increases when clicked. This is the default style.