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.
TIP
This feature was introduced in v3.6.0
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.