Speed Dial

Floating action buttons that expands on hover or click

Use the SpeedDial component to display a floating action button that expands on hover/click and provides fast access to important actions without cluttering the UI.

---
import { SpeedDial } from 'webcoreui/astro'

// Or import your own SVG icons
import { github } from 'webcoreui/icons'

const items = [
    {
        icon: github,
        href: '/github'
    },
    { ... },
    { ... }
]
---

<SpeedDial items={items} />

<script>
    import { SpeedDial } from 'webcoreui/svelte'

    // Import your own SVG icons
    import { github } from 'webcoreui/icons'

    const items = [
        {
            icon: github,
            href: '/github'
        },
        { ... },
        { ... }
    ]
</script>

<SpeedDial items={items} />

import React from 'react'
import { SpeedDial } from 'webcoreui/react'

// Import your own SVG icons
import { github } from 'webcoreui/icons'

const Component = () => {
    const items = [
        {
            icon: github,
            href: '/github'
        },
        { ... },
        { ... }
    ]

    return <SpeedDial items={items} />
}

export default Component

The component expects an items prop that describes the navigation items in an array of object with an icon and href property. You can either pass an SVG string to the icon property, or use one of the icon types that are available in Webcore. For the list of available icon types, please see the documentation of the Icon component.

Positions

The SpeedDial component has a fixed position in the bottom-right corner. This can be changed by setting the position prop:

<SpeedDial
    items={items}
    position="top-left"
/>

<SpeedDial
    items={items}
    position="top-right"
/>

<SpeedDial
    items={items}
    position="bottom-left"
/>

You can also change the layout of the navigation items from vertical to horizontal by setting the horizontal prop to true:

<SpeedDial
    items={items}
    position="top-left"
    horizontal={true}
/>

<SpeedDial
    items={items}
    position="top-right"
    horizontal={true}
/>

<SpeedDial
    items={items}
    position="bottom-left"
    horizontal={true}
/>

Themes

The SpeedDial component can be themed using the theme prop that accepts the same themes as a Button component:

<SpeedDial items={items} theme="outline" />
<SpeedDial items={items} theme="flat" />
<SpeedDial items={items} theme="secondary" />
<SpeedDial items={items} theme="info" />
<SpeedDial items={items} theme="success" />
<SpeedDial items={items} theme="warning" />
<SpeedDial items={items} theme="alert" />

Circular

The appearance can be further customized using the circular and icon props:

---
import { home } from 'webcoreui/icons'
---

<SpeedDial
    items={items}
    circular={true}
    icon={home}
/>

The size of the buttons can also be configured by overriding the following CSS property in your styles:

html body {
    --w-speed-dial-size: 50px;
}

Tooltips

To help users better understand the purpose of navigation elements, you can assign tooltips to your items objects using the tooltip property:

---
import { SpeedDial } from 'webcoreui/astro'
import { github } from 'webcoreui/icons'

const items = [
    {
        icon: githubIcon,
        href: '/github',
        tooltip: 'GitHub',
    },
    { ... },
    { ... }
]
---

<SpeedDial items={items} />

Tooltips will be automatically positioned based on the position and layout of the SpeedDial component.

Expand on Click

The SpeedDial component is automatically expanded on hover. This behavior can be changed to only expand the element on click using the triggerOnClick prop:

<SpeedDial
    items={items}
    triggerOnClick={true}
/>

API

type SpeedDialProps = {
    items: {
        icon: string
        href: string
        tooltip?: string
        target?: '_self'
        | '_blank'
        | '_parent'
        | '_top'
        | '_unfencedTop'
    }[]
    position?: 'top-left' | 'top-right' | 'bottom-left'
    horizontal?: boolean
    circular?: boolean
    theme?: ButtonProps['theme']
    icon?: string
    triggerOnClick?: boolean
    className?: string
}