# Buttons: Floating Action Button
v-btn component can be used as a floating action button. This provides an application with 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.
# 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.
# Small variant
For better visual appeal, we use a small button to match our list avatars.
# Speed dial
The speed-dial component has a very robust api for customizing your FAB experience exactly how you want.