Vuetify FAB: How to Create Floating Action Buttons
Learn how to use Vuetify to create and customize a floating action button (FAB) to represent the primary action of a screen.
A floating action button (FAB) is used to signify the primary action to be taken on a particular screen. In this post, we’re going to learn how to use the button component (v-btn) to create FABs.
v-btn fab Prop
We can create a FAB by setting the fab prop of the button component to true:
<template>
<v-app>
<div class="text-center ma-4">
<v-btn fab>
<v-icon>mdi-plus</v-icon>
</v-btn>
</div>
</v-app>
</template><script>
export default {
name: 'App',
};
</script>
Vuetify FAB Color
We can use the color prop of the v-btn component to customize the color of the FAB.
<template>
<v-app>
<div class="text-center ma-4">
<v-btn
fab
color="primary"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</div>
</v-app>
</template><script>
export default {
name: 'App',
};
</script>
Vuetify FAB Depressed
Setting the depressed prop of the v-btn component to true will remove elevation from a FAB.
<template>
<v-app>
<div class="text-center ma-4">
<v-btn
fab
color="primary"
depressed
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</div>
</v-app>
</template><script>
export default {
name: 'App',
};
</script>
Beautify with Vuetify
The complete guide to creating elegant web apps with the Vuetify Material Design framework.
Get a free copy here.
FAB icon Prop
The icon prop designates the button component as an icon. It removes the background and sets the FAB icon color to the value of the color prop.
<template>
<v-app>
<div class="text-center ma-4">
<v-btn
fab
color="primary"
icon
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</div>
</v-app>
</template><script>
export default {
name: 'App',
};
</script>
Vuetify FAB Outlined
We can the outlined prop of the v-btn component to create an outlined FAB.
<template>
<v-app>
<div class="text-center ma-4">
<v-btn
fab
color="primary"
outlined
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</div>
</v-app>
</template><script>
export default {
name: 'App',
};
</script>
Vuetify FAB Elevation
We can control the amount of elevation the FAB has with the elevation prop. We can set the elevation to a value between 0 and 24 inclusive.
<template>
<v-app>
<div class="text-center ma-4">
<v-btn
fab
color="primary"
elevation="10"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</div>
</v-app>
</template><script>
export default {
name: 'App',
};
</script>
Vuetify FAB Tile
The tile property removes the border radius from the FAB:
<template>
<v-app>
<div class="text-center ma-4">
<v-btn
fab
color="primary"
tile
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</div>
</v-app>
</template><script>
export default {
name: 'App',
};
</script>
Vuetify FAB Size
We can use one of the x-small, small, large, and x-large props to customize the size of the FAB.
<template>
<v-app>
<div class="d-flex justify-center">
<div
class="d-flex ma-4 align-center justify-space-around"
style="width: 400px"
>
<v-btn
fab
color="primary"
x-small
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-btn
fab
color="primary"
small
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-btn
fab
color="primary"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-btn
fab
color="primary"
large
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-btn
fab
color="primary"
x-large
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</div>
</div>
</v-app>
</template><script>
export default {
name: 'App',
};
</script>
Extended FAB
Vuetify doesn’t support it yet, but we can use custom CSS to create an extended FAB.
<template>
<v-app>
<div class="text-center ma-4">
<v-btn
fab
color="primary"
style="
width: fit-content;
border-radius: 100px;
padding: 16px;
"
>
<v-icon>mdi-plus</v-icon>
Create
</v-btn>
</div>
</v-app>
</template><script>
export default {
name: 'App',
};
</script>
Vuetify FAB Speed Dial
With the speed dial component (v-speed-dial), a FAB can emit a stack of related actions when pressed:
<template>
<v-app>
<v-speed-dial
v-model="fab"
direction="top"
transition="slide-y-reverse-transition"
absolute
bottom
right
>
<template v-slot:activator>
<v-btn
v-model="fab"
color="blue darken-2"
dark
fab
>
<v-icon v-if="fab"> mdi-close </v-icon>
<v-icon v-else> mdi-image </v-icon>
</v-btn>
</template>
<v-btn
fab
small
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn
fab
small
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-btn
fab
small
>
<v-icon>mdi-star</v-icon>
</v-btn>
</v-speed-dial>
</v-app>
</template><script>
export default {
name: 'App',
data: () => ({
fab: false,
}),
};
</script>
Using FABs in Lateral Screens
There are certain instances where we have FABs with different actions on screens next to each other, like the content screens of a set of tab items. We can display a transition to signify the change of action with the fab-transition component. fab-transition works with the key prop of the v-btn. It triggers the transition when the FAB key changes.
<template>
<v-app>
<v-app-bar
dark
color="red accent-2"
app
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Page Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
<template v-slot:extension>
<v-tabs
v-model="tabs"
align-with-title
>
<v-tab href="#one"> Item One </v-tab>
<v-tab href="#two"> Item Two </v-tab>
<v-tab href="#three"> Item Three </v-tab>
<v-tabs-slider color="white"></v-tabs-slider>
</v-tabs>
</template>
</v-app-bar>
<v-main>
<v-fab-transition>
<v-btn
:key="activeFab.icon"
fab
right
absolute
bottom
style="bottom: 16px"
color="red accent-2"
dark
>
<v-icon>{{ activeFab.icon }}</v-icon>
</v-btn>
</v-fab-transition>
</v-main>
</v-app>
</template><script>
export default {
name: 'App',
data: () => ({
fab: false,
hidden: false,
tabs: null,
}), computed: {
activeFab() {
switch (this.tabs) {
case 'one':
return {
icon: 'mdi-plus',
};
case 'two':
return { icon: 'mdi-pencil' };
case 'three':
return {
icon: 'mdi-play',
};
default:
return {};
}
},
},
};
</script>
Conclusion
A floating action button (FAB) is used to indicate the main action to be performed on a screen. We can use the fab prop of the v-btn component in combination with various other props to create and customize FABs.
Get weekly tips and tutorials on Vuetify, Vue.js, JavaScript, and more: http://eepurl.com/hRfyJL
Updated at: codingbeautydev.com
