flowbite-svelte 0.44.8 → 0.44.9

package/src/routes/docs/components/skeleton.md

@@ -0,0 +1,165 @@
+---
+layout: componentLayout
+title: Svelte Skeleton - Flowbite
+breadcrumb_title: Svelte Skeleton
+component_title: Skeleton
+dir: Components
+description: The skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video
+thumnailSize: w-40
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A } from '$lib'
+  
+  const components = 'CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder'
+</script>
+
+Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, images, videos, and more.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder } from 'flowbite-svelte';
+</script>
+```
+
+## Default skeleton
+
+```svelte example
+<script>
+  import { Skeleton } from 'flowbite-svelte';
+</script>
+
+<Skeleton size="sm" class="my-8" />
+<Skeleton size="md" class="my-8" />
+<Skeleton size="lg" class="my-8" />
+<Skeleton size="xl" class="my-8" />
+<Skeleton size="xxl" class="mt-8 mb-2.5" />
+```
+
+## Image placeholder
+
+```svelte example
+<script>
+  import { ImagePlaceholder } from 'flowbite-svelte';
+</script>
+
+<ImagePlaceholder />
+<ImagePlaceholder imgHeight={60} class="mt-8" />
+```
+
+## Video placeholder
+
+```svelte example
+<script>
+  import { VideoPlaceholder } from 'flowbite-svelte';
+</script>
+
+<VideoPlaceholder />
+<VideoPlaceholder size="md" class="mt-8" />
+<VideoPlaceholder size="lg" class="mt-8" />
+<VideoPlaceholder size="xl" class="mt-8" />
+<VideoPlaceholder size="xxl" class="mt-8" />
+```
+
+## Text placeholder
+
+```svelte example
+<script>
+  import { TextPlaceholder } from 'flowbite-svelte';
+</script>
+
+<TextPlaceholder />
+<TextPlaceholder size="md" class="mt-8" />
+<TextPlaceholder size="lg" class="mt-8" />
+<TextPlaceholder size="xl" class="mt-8" />
+<TextPlaceholder size="xxl" class="mt-8" />
+```
+
+## Card placeholder
+
+```svelte example
+<script>
+  import { CardPlaceholder } from 'flowbite-svelte';
+</script>
+
+<CardPlaceholder />
+<CardPlaceholder size="md" class="mt-8" />
+<CardPlaceholder size="lg" class="mt-8" />
+<CardPlaceholder size="xl" class="mt-8" />
+<CardPlaceholder size="xxl" class="mt-8" />
+```
+
+## Widget placeholder
+
+```svelte example
+<script>
+  import { WidgetPlaceholder } from 'flowbite-svelte';
+</script>
+
+<WidgetPlaceholder />
+```
+
+## List placeholder
+
+```svelte example
+<script>
+  import { ListPlaceholder } from 'flowbite-svelte';
+</script>
+
+<ListPlaceholder />
+```
+
+## Testimonial placeholder
+
+```svelte example
+<script>
+  import { TestimonialPlaceholder } from 'flowbite-svelte';
+</script>
+
+<TestimonialPlaceholder />
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### CardPlaceholder styling
+
+- Use the `class` prop to overwrite `divClass`.
+
+### ImagePlaceholder styling
+
+- Use the `class` prop to overwrite `divClass`.
+
+### ListPlaceholder styling
+
+- Use the `class` prop to overwrite `divClass`.
+
+### Skeleton styling
+
+- Use the `class` prop to overwrite `divClass`.
+
+### TestimonialPlaceholder styling
+
+- Use the `class` prop to overwrite `divClass`.
+
+### TextPlaceholder styling
+
+- Use the `class` prop to overwrite `divClass`.
+
+### VideoPlaceholder styling
+
+- Use the `class` prop to overwrite `divClass`.
+
+### WidgetPlaceholder styling
+
+- Use the `class` prop to overwrite `divClass`.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Skeleton](https://flowbite.com/docs/components/sidebar/)

package/src/routes/docs/components/speed-dial.md

@@ -0,0 +1,523 @@
+---
+layout: componentLayout
+title: Svelte Speed Dial - Flowbite
+breadcrumb_title: Svelte Speed Dial
+component_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.
+thumnailSize: w-64
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A, Alert } from '$lib'  
+
+  const components = 'SpeedDial, SpeedDialButton'
+</script>
+
+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.
+
+<Alert>
+
+**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.
+
+</Alert>
+
+```svelte example class="relative h-96"
+<script>
+  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
+  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
+</script>
+
+<SpeedDial defaultClass="absolute right-6 bottom-6">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Print">
+    <PrintSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Download">
+    <DownloadSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Copy">
+    <FileCopySolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+```
+
+## 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.
+
+```svelte example class="relative h-96"
+<script>
+  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
+  import { ShareNodesSolid } from 'flowbite-svelte-icons';
+</script>
+
+<SpeedDial color="primary" defaultClass="absolute left-6 bottom-6">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="purple" defaultClass="absolute left-24 bottom-6">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="light" defaultClass="absolute left-44 bottom-6">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="dark" defaultClass="absolute left-64 bottom-6">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+
+<SpeedDial color="red" defaultClass="absolute right-6 bottom-6">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="green" defaultClass="absolute right-24 bottom-6">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="yellow" defaultClass="absolute right-44 bottom-6">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="blue" defaultClass="absolute right-64 bottom-6">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+
+<SpeedDial color="purpleToBlue" gradient defaultClass="absolute left-6 bottom-36">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="cyanToBlue" gradient defaultClass="absolute left-24 bottom-36">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="greenToBlue" gradient defaultClass="absolute left-44 bottom-36">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="purpleToPink" gradient defaultClass="absolute left-64 bottom-36">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+
+<SpeedDial color="green" outline defaultClass="absolute right-6 bottom-36">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="red" outline defaultClass="absolute right-24 bottom-36">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="blue" outline defaultClass="absolute right-44 bottom-36">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="purple" outline defaultClass="absolute right-64 bottom-36">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+
+<SpeedDial color="blue" gradient defaultClass="absolute left-6 bottom-64">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="green" gradient defaultClass="absolute left-24 bottom-64">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="cyan" gradient defaultClass="absolute left-44 bottom-64">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial color="teal" gradient defaultClass="absolute left-64 bottom-64">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+
+<SpeedDial shadow="blue" gradient color="blue" defaultClass="absolute right-6 bottom-64">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial shadow="green" gradient color="green" defaultClass="absolute right-24 bottom-64">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial shadow="purple" gradient color="purple" defaultClass="absolute right-44 bottom-64">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+<SpeedDial shadow="pink" gradient color="pink" defaultClass="absolute right-64 bottom-64">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+```
+
+## 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.
+
+```svelte example class="relative h-96"
+<script>
+  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
+  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
+</script>
+
+<SpeedDial defaultClass="absolute right-6 bottom-6" pill={false}>
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Print">
+    <PrintSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Download">
+    <DownloadSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Copy">
+    <FileCopySolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+```
+
+## Text inside button
+
+This example can be used to show the descriptive text inside the button instead of a tooltip.
+
+```svelte example class="relative h-96"
+<script>
+  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
+  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
+</script>
+
+<SpeedDial defaultClass="absolute right-24 bottom-6" tooltip="none">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Print">
+    <PrintSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Save">
+    <DownloadSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Copy">
+    <FileCopySolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+
+<SpeedDial defaultClass="absolute right-6 bottom-6" pill={false} tooltip="none">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Print">
+    <PrintSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Save">
+    <DownloadSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Copy">
+    <FileCopySolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+```
+
+## Text outside button
+
+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"
+<script>
+  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
+  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
+</script>
+
+<SpeedDial defaultClass="absolute right-24 bottom-6" tooltip="none" textOutside>
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Print">
+    <PrintSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Save">
+    <DownloadSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Copy">
+    <FileCopySolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+
+<SpeedDial defaultClass="absolute right-6 bottom-6" pill={false} tooltip="none" textOutside>
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Print">
+    <PrintSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Save">
+    <DownloadSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Copy">
+    <FileCopySolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+```
+
+## Dropdown menu
+
+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"
+<script>
+  import { SpeedDial, Listgroup, ListgroupItem } from 'flowbite-svelte';
+  import { DotsHorizontalOutline, ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
+</script>
+
+<SpeedDial defaultClass="absolute right-24 bottom-6" tooltip="none" placement="top-end">
+  <DotsHorizontalOutline slot="icon" class="w-8 h-8" />
+  <Listgroup class="divide-none" active>
+    <ListgroupItem class="flex gap-2 md:px-5">
+      <ShareNodesSolid class="w-3.5 h-3.5" />
+      Share
+    </ListgroupItem>
+    <ListgroupItem class="flex gap-2 md:px-5">
+      <PrintSolid class="w-3.5 h-3.5" />
+      Print
+    </ListgroupItem>
+    <ListgroupItem class="flex gap-2 md:px-5">
+      <DownloadSolid class="w-3.5 h-3.5" />
+      Save
+    </ListgroupItem>
+    <ListgroupItem class="flex gap-2 md:px-5">
+      <FileCopySolid class="w-3.5 h-3.5" />
+      Copy
+    </ListgroupItem>
+  </Listgroup>
+</SpeedDial>
+
+<SpeedDial defaultClass="absolute right-6 bottom-6" tooltip="none" pill={false} placement="top-end">
+  <DotsHorizontalOutline slot="icon" class="w-8 h-8" />
+  <Listgroup class="divide-none" active>
+    <ListgroupItem class="flex gap-2 md:px-5">
+      <ShareNodesSolid class="w-3.5 h-3.5" />
+      Share
+    </ListgroupItem>
+    <ListgroupItem class="flex gap-2 md:px-5">
+      <PrintSolid class="w-3.5 h-3.5" />
+      Print
+    </ListgroupItem>
+    <ListgroupItem class="flex gap-2 md:px-5">
+      <DownloadSolid class="w-3.5 h-3.5" />
+      Save
+    </ListgroupItem>
+    <ListgroupItem class="flex gap-2 md:px-5">
+      <FileCopySolid class="w-3.5 h-3.5" />
+      Copy
+    </ListgroupItem>
+  </Listgroup>
+</SpeedDial>
+```
+
+## Alternative menu
+
+This example can be used to show an alternative style when showing a list of menu items.
+
+```svelte example class="relative h-96"
+<script>
+  import { SpeedDial, Listgroup, ListgroupItem } from 'flowbite-svelte';
+  import { PenSolid, ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
+</script>
+
+<SpeedDial defaultClass="absolute right-24 bottom-6" tooltip="none" placement="top-end">
+  <PenSolid slot="icon" class="w-8 h-8" />
+  <Listgroup active>
+    <ListgroupItem class="flex">
+      <ShareNodesSolid class="mr-2 w-5 h-5" />
+      Share
+    </ListgroupItem>
+    <ListgroupItem class="flex">
+      <PrintSolid class="mr-2 w-5 h-5" />
+      Print
+    </ListgroupItem>
+    <ListgroupItem class="flex">
+      <DownloadSolid class="mr-2 w-5 h-5" />
+      Save
+    </ListgroupItem>
+    <ListgroupItem class="flex">
+      <FileCopySolid class="mr-2 w-5 h-5" />
+      Copy
+    </ListgroupItem>
+  </Listgroup>
+</SpeedDial>
+
+<SpeedDial defaultClass="absolute right-6 bottom-6" tooltip="none" pill={false} placement="top-end">
+  <Listgroup active>
+    <ListgroupItem class="flex">
+      <ShareNodesSolid class="mr-2 w-5 h-5" />
+      Share
+    </ListgroupItem>
+    <ListgroupItem class="flex">
+      <PrintSolid class="mr-2 w-5 h-5" />
+      Print
+    </ListgroupItem>
+    <ListgroupItem class="flex">
+      <DownloadSolid class="mr-2 w-5 h-5" />
+      Save
+    </ListgroupItem>
+    <ListgroupItem class="flex">
+      <FileCopySolid class="mr-2 w-5 h-5" />
+      Copy
+    </ListgroupItem>
+  </Listgroup>
+</SpeedDial>
+```
+
+## 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`.
+
+```svelte example class="relative h-[400px]"
+<script>
+  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
+  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
+  const placements = [
+    ['left-2 top-2', 'right', 'bottom'],
+    ['right-6 top-2', 'bottom', 'left'],
+    ['right-6 bottom-6', 'left', 'top'],
+    ['left-2 bottom-6', 'top', 'right']
+  ];
+</script>
+
+{#each placements as [position, placement, tooltip]}
+  <SpeedDial defaultClass="absolute {position}" {placement}>
+    <SpeedDialButton name="Share" {tooltip}>
+      <ShareNodesSolid class="w-5 h-5" />
+    </SpeedDialButton>
+    <SpeedDialButton name="Print" {tooltip}>
+      <PrintSolid class="w-5 h-5" />
+    </SpeedDialButton>
+    <SpeedDialButton name="Download" {tooltip}>
+      <DownloadSolid class="w-5 h-5" />
+    </SpeedDialButton>
+    <SpeedDialButton name="Copy" {tooltip}>
+      <FileCopySolid class="w-5 h-5" />
+    </SpeedDialButton>
+  </SpeedDial>
+{/each}
+```
+
+## 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.
+
+```svelte example class="relative h-96"
+<script>
+  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
+  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
+</script>
+
+<SpeedDial defaultClass="absolute left-2 bottom-6" trigger="hover" tooltip="right">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Print">
+    <PrintSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Download">
+    <DownloadSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Copy">
+    <FileCopySolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+
+<SpeedDial defaultClass="absolute right-6 bottom-6" trigger="click">
+  <SpeedDialButton name="Share">
+    <ShareNodesSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Print">
+    <PrintSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Download">
+    <DownloadSolid class="w-5 h-5" />
+  </SpeedDialButton>
+  <SpeedDialButton name="Copy">
+    <FileCopySolid class="w-5 h-5" />
+  </SpeedDialButton>
+</SpeedDial>
+```
+
+## Control open state
+
+Use the `open` property to control the state of the popup menu.
+
+```svelte example class="relative h-96"
+<script>
+  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
+  let open = false;
+
+  const close = () => {
+    open = false;
+  };
+</script>
+
+<SpeedDial bind:open defaultClass="absolute right-6 bottom-6">
+  <SpeedDialButton name="Share" on:click={close}>Share</SpeedDialButton>
+  <SpeedDialButton name="Print" on:click={close}>Print</SpeedDialButton>
+</SpeedDial>
+```
+
+The default trigger type is hover for each speed dial component.
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### SpeedDial styling
+
+- Use the `class` prop to overwrite `defaultClass`.
+
+### SpeedDialButton styling
+
+- Use the `class` prop to overwrite `btnDefaultClass`.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Speed Dial](https://flowbite.com/docs/components/speed-dial/)