#Floating Action Buttons
The v-fab component can be used as a floating action button. This provides an application with a main point of action.
#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
| Component | Description |
|---|---|
| v-fab | Primary Component |
#Examples
The following are a collection of examples that demonstrate more advanced and real world use of the v-fab component.
#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.
#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.
FAB position
FAB location
(right bottom)Menu location
(left center)