Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
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.
Flat 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.
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.