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.
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.
Select your desired component from below and see the available props, slots, events and functions.
Applies position: absolute to the component.
Aligns the component towards the bottom.
Direction in which speed-dial content will show. Possible values are top, bottom, left, right.
Applies position: fixed to the component.
Aligns the component towards the left.
Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation for transition modes.
Opens speed-dial on hover
Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.
Aligns the component towards the right.
Aligns the content towards the top.
Sets the component transition. Can be one of the built in transitions or one your own.
Controls whether the component is visible or hidden.
When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation
The default Vue slot.
6px !default;16px !default;1 !default;Below is a collection of simple to complex examples.
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-transition with v-show. You can also use any custom transition provided by Vuetify or your own.
The speed-dial component has an very robust api for customizing your FAB experience exactly how you want.
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.