Speed Dials

The v-speed-dial component can be used as a floating action button that can reveal additional actions when clicked.

Copy Page as Markdown

Usage

Speed dials 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.

<v-speed-dial
  location="bottom center"
  transition="fade-transition"
>
  <template v-slot:activator="{ props: activatorProps }">
    <v-fab
      v-bind="activatorProps"
      size="large"
      icon="$vuetify"
    ></v-fab>
  </template>

  <v-btn key="1" icon="$success"></v-btn>
  <v-btn key="2" icon="$info"></v-btn>
  <v-btn key="3" icon="$warning"></v-btn>
  <v-btn key="4" icon="$error"></v-btn>
</v-speed-dial>