Buttons: Floating Action Button

The v-btn component can be used as a Floating action button. This provides an application a main point of action. Combined with the v-speed-dial component, you can create a diverse set of functions available for your users.

Usage

Floating action buttons can be attached to material to signify a promoted action in your application. The default size will be used in most cases, whereas the small variant can be used to maintain continuity with similar sized elements.

API

v-speed-dial
Name
absolute
Default
false
Type
boolean

Position the element absolutely

Name
bottom
Default
false
Type
boolean

Align the component towards the bottom

Name
direction
Default
'top'
Type
string

Direction in which speed-dial content will show. Possible values are top, bottom, left, right.

Name
fixed
Default
false
Type
boolean

Position the element fixed

Name
left
Default
false
Type
boolean

Align the component towards the left

Name
mode
Default
undefined
Type
string

Sets the transition mode (does not apply to transition-group) vue docs

Name
open-on-hover
Default
false
Type
boolean

Opens speed-dial on hover

Name
origin
Default
undefined
Type
string

Sets the transition origin

Name
right
Default
false
Type
boolean

Align the component towards the right

Name
top
Default
false
Type
boolean

Align the content towards the top

Name
transition
Default
'scale-transition'
Type
string

Sets the component transition. Can be one of the built in transitions or your own.

Name
value
Default
undefined
Type
any

Controls visibility

Examples

Small variant

For better visual appeal, we use a small button to match our list avatars.

Display animation

When displaying for the first time, a floating action button should animate onto the screen. Here we use the v-fab-transition with v-show. You can also use any custom transition provided by Vuetify or your own.

Lateral screens

When changing the default action of your button, it is recommended that you display a transition to signify a change. We do this by binding the key prop to a piece of data that can properly signal a change in action to the Vue transition system. While you can use a custom transition for this, ensure that you set the mode prop to out-in.

FAB with speed-dial

The speed-dial component has an very robust api for customizing your FAB experience exactly how you want.

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