SpeedDial

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.

Default speed dial

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 end-6 bottom-6`. However for the sake of the examples below `fixed` must be changed to `absolute`, therefore you can notice `defaultClass="absolute end-6 start-6"` at every example.

Colors

The Speed Dial components accommodate a variety of Button component properties, including color options (blue, dark, alternative, light, green, red, yellow, primary, and purple), gradient, shadow, and outline styles. For further information, please refer to **[the Button component](https://flowbite-svelte.com/components/button)** documentation.

Square speed dial

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.

Text inside button

This example can be used to show the descriptive text inside the button instead of a tooltip.

Text outside button

Use this example to show the text of each button outside of the speed dial as an alternative style.

Dropdown menu

This example can be used to show a list of menu items instead of buttons when activating the speed dial.

Alternative menu

This example can be used to show an alternative style when showing a list of menu items.

Alignment - Position

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`.

Triggering

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.

Control open state

Use the `open` property to control the state of the popup menu.

The default trigger type is hover for each speed dial component.

Custom main button

You can change the main button to any element you want by using the `slot='button'`.