# 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

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

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:11/12/2024, 6:59:50 AM