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.


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.


v-speed-dial', 'v-btn


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.