For Enterprise

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.

Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.


Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

Text buttons have no box shadow and no background. Only on hover is the container for the button shown.

Raised buttons have a box shadow that increases when clicked. This is the default style.

Depressed buttons still maintain their background color, but have no box shadow.

Button dropdowns are regular selects with additional styling.

Icons can be used for the primary content of a button.

Floating buttons are rounded and usually contain an icon.

Buttons can be given different sizing options to fit a multitude of scenarios.

Outlined buttons inherit their borders from the current color applied.

Rounded buttons behave the same as regular buttons but have rounded edges.

Tile buttons behave the same as regular buttons but have no border radius.

Block buttons extend the full available width.

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.

Caught a mistake or want to contribute to the documentation? Edit Layout or Content on GitHub!