Speed Dial

The Speed Dial component provides a floating action button that displays additional actions when activated.

It is based on Vuetify's v-speed-dial component and supports configurable opening direction, transition animation, hover behavior, positioning, and active state.

The component is created with a default activator button and three default action buttons.

Props

Attribute	Description	Type	Default
value	Controls whether the Speed Dial is open or closed.	boolean	false
direction	Defines the direction in which the Speed Dial action buttons are displayed. Available values are top, bottom, left, and right.	string	top
openOnHover	Determines whether the Speed Dial opens when the user hovers over the activator button.	boolean	false
transition	Defines the transition animation used when displaying or hiding the Speed Dial items.	string	scale-transition
absolute	Applies position: absolute to the Speed Dial component.	boolean	false
fixed	Applies position: fixed to the Speed Dial component.	boolean	false
top	Positions the Speed Dial toward the top.	boolean	false
bottom	Positions the Speed Dial toward the bottom.	boolean	true
left	Positions the Speed Dial toward the left.	boolean	false
right	Positions the Speed Dial toward the right.	boolean	true
visible	Defines the visibility of the Speed Dial component.	boolean	true

Direction

The direction prop determines where the action buttons are displayed relative to the activator button.

Available values:

Value	Description
top	Displays the action buttons above the activator.
bottom	Displays the action buttons below the activator.
left	Displays the action buttons to the left of the activator.
right	Displays the action buttons to the right of the activator.

Open On Hover

The openOnHover prop determines how the Speed Dial is activated. When false, the Speed Dial is opened by clicking the activator button. When true, the Speed Dial opens when the user hovers over the activator.

Transition

The transition prop determines which animation is used when Speed Dial action buttons are shown or hidden.

Available transition options include:

scale-transition
slide-x-transition
slide-x-reverse-transition
slide-y-transition
slide-y-reverse-transition

Position

The Speed Dial can be positioned using the top, bottom, left, and right props. The position props are typically used together with absolute or fixed.

Example:

absolute = true
bottom = true
right = true

Slots

The Speed Dial contains two main slots:

Slot	Description
activator	Contains the main button used to open or close the Speed Dial.
default	Contains the action buttons displayed when the Speed Dial is open.

Activator

The component automatically creates an activator button inside the activator slot.

Default structure:

Speed Dial
└── activator
    └── VBtn
        └── VIcon

The activator button and its icon can be edited independently in Studio.

Speed Dial Items

The default slot contains the buttons displayed after the Speed Dial is opened.

By default, three action buttons are generated:

Item	Default Icon
Action 1	mdi-pencil
Action 2	mdi-plus
Action 3	mdi-delete

Each generated action contains:

VBtn
└── VIcon

Template Structure

When a new Speed Dial component is added to the page, the following structure is generated automatically:

Speed Dial
├── activator
│   └── VBtn
│       └── VIcon
│           └── mdi-account-circle
│
└── default
    ├── VBtn
    │   └── VIcon
    │       └── mdi-pencil
    │
    ├── VBtn
    │   └── VIcon
    │       └── mdi-plus
    │
    └── VBtn
        └── VIcon
            └── mdi-delete

The generated buttons and icons are normal Studio components and can be configured separately.

Events

Speed Dial itself does not require a dedicated action event for its child buttons.

Actions should normally be defined on the VBtn components contained inside the Speed Dial.

For example:

SpeedDial
└── default
    ├── EditButton   → click event
    ├── AddButton    → click event
    └── DeleteButton → click event

Each button can execute its own action.