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

v-btn
Name
absolute
Default
false
Type
boolean

Position the element absolutely

Name
active-class
Default
'v-btn--active'
Type
string

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"

Name
append
Default
false
Type
boolean

Vue Router router-link prop

Name
block
Default
false
Type
boolean

Expands the button to 100% of available space

Name
bottom
Default
false
Type
boolean

Align the component towards the bottom

Name
color
Default
undefined
Type
string

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))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
depressed
Default
false
Type
boolean

Removes the button box shadow

Name
disabled
Default
false
Type
boolean

Route item is disabled

Name
exact
Default
false
Type
boolean

Exactly match the link. Without this, '/' will match every route

Name
exact-active-class
Default
undefined
Type
string

Vue Router router-link prop

Name
fab
Default
false
Type
boolean

Makes button round

Name
fixed
Default
false
Type
boolean

Position the element fixed

Name
flat
Default
false
Type
boolean

Removes the button background color

Name
href
Default
undefined
Type
string | object

Will designate the component tag to <a>

Name
icon
Default
false
Type
boolean

Designates the button as icon - round and flat

Name
input-value
Default
undefined
Type
any

Controls the button active state

Name
large
Default
false
Type
boolean

Large size button

Name
left
Default
false
Type
boolean

Align the component towards the left

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
loading
Default
false
Type
boolean

Adds a loading icon animation

Name
nuxt
Default
false
Type
boolean

Specifies the link is a nuxt-link

Name
outline
Default
false
Type
boolean

Button will have an outline

Name
replace
Default
false
Type
boolean

Vue Router router-link prop

Name
right
Default
false
Type
boolean

Align the component towards the right

Name
ripple
Default
undefined
Type
boolean | object

Applies the v-ripple directive

Name
round
Default
false
Type
boolean

Button will be round on the sides

Name
small
Default
false
Type
boolean

Small size button

Name
tag
Default
'button'
Type
string

Specify a custom tag to use on the component

Name
target
Default
undefined
Type
string

Specify the target attribute.

Name
to
Default
undefined
Type
string | object

Will designate the component tag to <router-link>

Name
top
Default
false
Type
boolean

Align the content towards the top

Name
type
Default
'button'
Type
string

Set the button's type attribute

Name
value
Default
undefined
Type
any

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.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore