Skip to main content

​
VFab

The VFab component is a floating action button that can be positioned on the screen. It extends VBtn with positioning and layout capabilities.

​
Basic Usage

<template>
  <VFab icon="mdi-plus" />
</template>

​
Positioning

<template>
  <!-- Bottom right (default) -->
  <VFab icon="mdi-plus" location="bottom end" />
  
  <!-- Bottom left -->
  <VFab icon="mdi-plus" location="bottom start" />
  
  <!-- Top right -->
  <VFab icon="mdi-plus" location="top end" />
  
  <!-- Top left -->
  <VFab icon="mdi-plus" location="top start" />
</template>

​
Extended FAB

<template>
  <VFab extended icon="mdi-plus">
    Create New
  </VFab>
</template>

​
App Integration

<template>
  <!-- Integrated with app layout -->
  <VFab app icon="mdi-plus" location="bottom end" />
</template>

​
Props

​
app
boolean
default:"false"
Integrates with Vuetify’s application layout system
​
appear
boolean
default:"false"
Applies transition on initial render
​
extended
boolean
default:"false"
Extends the FAB to show text alongside the icon
​
layout
boolean
default:"false"
Affects the layout size when positioned with app
​
offset
boolean
default:"false"
Applies additional offset from the edge
​
modelValue
boolean
default:"true"
Controls visibility of the FAB
​
location
string
Position on screen. Format: [top|bottom] [start|end|center]
​
absolute
boolean
default:"false"
Uses absolute positioning instead of fixed
​
transition
string
default:"fab-transition"
Transition to use when showing/hiding
​
active
boolean
default:"true"
Controls whether FAB is active/visible
​
color
string
Button color
​
size
string
Button size. Options: x-small, small, default, large, x-large
​
icon
string | IconValue
Icon to display in the FAB
​
variant
string
default:"elevated"
Visual style variant. Options: elevated, flat, outlined, text, tonal, plain
​
order
string | number
Layout order when using app
​
name
string
Identifier for the layout item when using app

​
VBtn Props

The VFab component accepts all props from VBtn except location and spaced:
  • rounded
  • elevation
  • ripple
  • disabled
  • loading
  • theme
  • And all other VBtn props

​
Events

​
update:modelValue
event
Emitted when visibility changesPayload: boolean - The new visibility state

​
Slots

​
default
slot
FAB content (text when extended)
Inherits all slots from VBtn:
  • prepend
  • append
  • loader

​
Examples

​
Controlled Visibility

<template>
  <div>
    <VBtn @click="showFab = !showFab">
      Toggle FAB
    </VBtn>
    
    <VFab 
      v-model="showFab"
      icon="mdi-plus" 
      location="bottom end"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showFab = ref(true)
</script>

​
Extended with Icon

<template>
  <VFab 
    extended 
    icon="mdi-pencil"
    color="primary"
    location="bottom end"
  >
    Edit
  </VFab>
</template>

​
Multiple Sizes

<template>
  <VFab icon="mdi-plus" size="small" location="bottom start" />
  <VFab icon="mdi-plus" size="default" location="bottom center" />
  <VFab icon="mdi-plus" size="large" location="bottom end" />
</template>

​
With Offset

<template>
  <VFab 
    icon="mdi-plus"
    offset
    location="bottom end"
    color="secondary"
  />
</template>

​
Custom Transition

<template>
  <VFab 
    v-model="show"
    icon="mdi-heart"
    transition="scale-transition"
    appear
  />
</template>

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

​
App Layout Integration

<template>
  <VLayout>
    <VAppBar />
    
    <VMain>
      <!-- Page content -->
    </VMain>
    
    <VFab 
      app
      icon="mdi-plus"
      location="bottom end"
      layout
    />
  </VLayout>
</template>

​
With Loading State

<template>
  <VFab 
    icon="mdi-content-save"
    :loading="saving"
    @click="save"
  />
</template>

<script setup>
import { ref } from 'vue'

const saving = ref(false)

function save() {
  saving.value = true
  // Perform save operation
  setTimeout(() => {
    saving.value = false
  }, 2000)
}
</script>

​
Notes

  • The FAB uses position: fixed by default (or absolute when absolute prop is true)
  • When using app, the FAB integrates with Vuetify’s layout system
  • The layout prop determines if the FAB affects the layout size (adds padding)
  • Extended FABs automatically size to fit their content
  • Default transition is fab-transition which provides a scale and fade effect

Build docs developers (and LLMs) love

Get started for freeTalk to us