---
layout: componentLayout
title: Svelte Speed Dial - Flowbite
breadcrumb_title: Speed Dial
dir: Components
description: The speed dial component can be used as a quick way to show a list of action buttons to a user when hovering or clicking on the main trigger element.
---
Home{dir}{breadcrumb_title}{title}{description}Modal
Get started with the speed dial component to show a list of buttons or menu items positioned relative to the body in either corner as a quick way to allow certains actions to be made by your users.
To initialize a speed dial component you need to wrap the trigger element and the list of items inside an element and use the data-dial-init data attribute on it.
**Note!** Default class for speed dial is `fixed right-6 bottom-6`. However for the sake of the examples below `fixed` must be changed to `absolute`, therefore you can
notice `defaultClass="absolute right-6 left-6` at every example.
```svelte example class="relative h-96"
```
Use this example to make the trigger button’s style square instead of a full circle. As `SpeedDialButton` is an instance of `Button` we use the `pill` property to achevie the effect.
```svelte example class="relative h-96"
```
This example can be used to show the descriptive text inside the button instead of a tooltip.
```svelte example class="relative h-96"
```
Use this example to show the text of each button outside of the speed dial as an alternative style.
```svelte example class="relative h-96"
```
This example can be used to show a list of menu items instead of buttons when activating the speed dial.
```svelte example class="relative h-96"
Share
Print
Save
Copy
Share
Print
Save
Copy
```
This example can be used to show an alternative style when showing a list of menu items.
```svelte example class="relative h-96"
Share
Print
Save
Copy
Share
Print
Save
Copy
```
Align the speed dial menu items by using property `placement="top|right|left|bottom"`.
Control the main button position using the flexbox utility classes from Tailwind CSS through property `defaultClass`.
```svelte example class="relative h-[400px]"
{#each placements as [position, placement, tooltip]}
{/each}
```
Use the `trigger="click|hover"` attribute of the speed dial component to set which type of action should activate the speed dial: click or hover.
The default trigger type is hover for each speed dial component.
```svelte example class="relative h-96"
```
The default trigger type is hover for each speed dial component.
The component has the following props, type, and default values. See types
page for type information.