# 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


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.

# Block

block buttons extend the full available width.

# Flat

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

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

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

# 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

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

# Sizing

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

Ready for more?

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