- Buttons: Floating Action Button
v-btncomponent can be used as a Floating action button. This provides an application a main point of action. Combined with the
v-speed-dialcomponent, 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
smallvariant can be used to maintain continuity with similar sized elements.
For better visual appeal, we use a small button to match our list avatars.
When displaying for the first time, a floating action button should animate onto the screen. Here we use the
v-fab-transitionwith v-show. You can also use any custom transition provided by Vuetify or your own.
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
keyprop 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
modeprop to out-in.
The speed-dial component has an very robust api for customizing your FAB experience exactly how you want.
For more information on all the options available for the
v-btncomponent, please navigate to the Button documentation.