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.

Anatomy

The recommended placement of elements inside of v-btn is:

  • Place text in the center
  • Place visual content around container text

Element / AreaDescription
1. ContainerIn addition to text, the Button container typically holds a v-icon component
2. Icon (optional)Leading media content intended to improve visual context
3. TextA content area for displaying text and other inline elements

API

ComponentDescription
v-btnPrimary Component

Examples

Props

Variant

The variant prop gives you easy access to several different button styles. Available variants are: elevated(default), flat, tonal, outlined, text, and plain.

v-btn/prop-variant.vue

Block

block buttons extend the full available width.

v-btn/prop-block.vue

Flat

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

v-btn/prop-flat.vue

Icon

Icons can be used for the primary content of a button. Use the icon prop to either supply an icon in the default slot, or to directly use an icon.

v-btn/prop-icon.vue

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 with the loader slot.

v-btn/prop-loaders.vue

Outlined

outlined buttons inherit their borders from the current color applied.

v-btn/prop-outlined.vue

Plain

plain buttons have a lower baseline opacity that reacts to hover and focus.

v-btn/prop-plain.vue

Rounded

Use the rounded prop to control the border radius of buttons.

v-btn/prop-rounded.vue

Sizing

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

v-btn/prop-sizing.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.