# Buttons: Floating Action Button
The 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.
# 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
# Examples
# Misc
# 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.