Button
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.
API
Position the element absolutely
Class bound when component is active. warning Depending upon the component, this could cause side effects. If you need to add a custom class on top of a default, just do active-class="default-class your-class"
Vue Router router-link prop
Expands the button to 100% of available space
Align the component towards the bottom
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Applies the dark theme variant
Removes the button box shadow
Route item is disabled
Exactly match the link. Without this, '/' will match every route
Vue Router router-link prop
Makes button round
Position the element fixed
Removes the button background color
Will designate the component tag to <a>
Designates the button as icon - round and flat
Controls the button active state
Large size button
Align the component towards the left
Applies the light theme variant
Adds a loading icon animation
Specifies the link is a nuxt-link
Button will have an outline
Vue Router router-link prop
Align the component towards the right
Applies the v-ripple directive
Button will be round on the sides
Small size button
Specify a custom tag to use on the component
Specify the target attribute.
Will designate the component tag to <router-link>
Align the content towards the top
Set the button's type attribute
Controls visibility
Examples
Flat
Flat buttons have no box shadow and no background. Only on hover is the container for the button shown.
Raised
Raised buttons have a box shadow that increases when clicked. This is the default style.
Depressed
Depressed buttons still maintain their background color, but have no box shadow.
Button Dropdown Variants
Button dropdowns are regular selects with additional styling.
Icon
Icons can be used for the primary content of a button.
Floating
Floating buttons are round and usually contain 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.
Sizing
Buttons can be given different sizing options to fit a multitude of scenarios.
Outline
Outline buttons inherit their borders from the current color applied.
Round
Rounded buttons behave the same as regular buttons but have rounded edges.
Block
Block buttons extend the full available width.