🚀 SpeedDial Component

A floating action button (FAB) with an expandable action menu. Supports multiple layout types including linear, circle, semi-circle, and quarter-circle arrangements. Features staggered animations, tooltips, and full keyboard accessibility.

Linear Layout

Default

Items arranged in a straight line. Choose from four directions: up, down, left, or right. Perfect for edge-of-screen positioning.

Direction: Up

Direction: Down

Direction: Left

Direction: Right

View Code Example

<script>
  import SpeedDial from '$lib/components/SpeedDial.svelte';

  const actions = [
    { id: 'add', label: 'Add', icon: '➕', onclick: () => console.log('Add') },
    { id: 'edit', label: 'Edit', icon: '✏️', onclick: () => console.log('Edit') },
    { id: 'delete', label: 'Delete', icon: '🗑️', onclick: () => console.log('Delete') }
  ];
</script>

<SpeedDial {actions} direction="up" />
<SpeedDial {actions} direction="down" />
<SpeedDial {actions} direction="left" />
<SpeedDial {actions} direction="right" />

Circle Layout

360°

Items arranged in a full circle around the button. Great for center-of-screen positioning or when you need many actions accessible from all directions.

View Code Example

<SpeedDial
  actions={actions}
  type="circle"
  direction="up"
  radius={90}
/>

Semi-Circle Layout

180°

Items arranged in a half-circle. Ideal for edge positioning where the button is near a screen boundary.

Direction: Up

Direction: Down

Direction: Left

Direction: Right

View Code Example

<SpeedDial
  actions={actions}
  type="semi-circle"
  direction="up"
  radius={80}
/>

Quarter-Circle Layout

90°

Items arranged in a quarter-circle arc. Perfect for corner positioning where the button sits at the corner of the screen.

Top-Left Corner

Top-Right Corner

Bottom-Left Corner

Bottom-Right Corner

View Code Example

<!-- Bottom-right corner positioning -->
<div class="fixed bottom-4 right-4">
  <SpeedDial
    actions={actions}
    type="quarter-circle"
    direction="up"
    radius={70}
  />
</div>

With Modal Mask

Add a semi-transparent backdrop when the menu is open. Useful for focusing user attention and providing a clear dismiss target.

View Code Example

<SpeedDial
  actions={actions}
  direction="up"
  mask={true}
/>

Social Sharing

SVG Icons

Use custom SVG icons for a polished look. The icon prop accepts emoji, HTML strings, or SVG markup.

View Code Example

const socialActions = [
  {
    id: 'facebook',
    label: 'Facebook',
    icon: '<svg>...</svg>',
    onclick: () => shareToFacebook()
  },
  // ...more actions
];

<SpeedDial
  actions={socialActions}
  type="semi-circle"
  direction="up"
  radius={80}
  buttonLabel="Share"
/>

Custom Button Icon

Replace the default plus icon with your own. Use the buttonIcon prop to set a custom icon.

Emoji Icon

SVG Icon

View Code Example

<!-- Emoji button icon -->
<SpeedDial
  actions={actions}
  buttonIcon="☰"
  buttonLabel="Menu"
/>

<!-- SVG button icon -->
<SpeedDial
  actions={actions}
  buttonIcon={menuIcon}
  buttonLabel="Navigation"
/>

Animation Timing

Control the stagger delay between item animations with the transitionDelay prop. Higher values create more dramatic cascading effects.

No Delay (0ms)

Default (30ms)

Slow (100ms)

View Code Example

<SpeedDial actions={actions} transitionDelay={0} />   <!-- Simultaneous -->
<SpeedDial actions={actions} transitionDelay={30} />  <!-- Default cascade -->
<SpeedDial actions={actions} transitionDelay={100} /> <!-- Dramatic cascade -->

Tooltip Positions

Tooltips auto-position based on direction, or set explicitly with tooltipPosition. Disable tooltips entirely with showTooltip={false}.

Top Tooltips

Bottom Tooltips

No Tooltips

View Code Example

<SpeedDial actions={actions} tooltipPosition="top" />
<SpeedDial actions={actions} tooltipPosition="bottom" />
<SpeedDial actions={actions} showTooltip={false} />

Component Features

🎯

Multiple Layouts

Linear, circle, semi-circle, and quarter-circle arrangements for any use case.

🎬

Smooth Animations

Staggered entrance/exit with configurable timing and GPU-accelerated transforms.

💬

Smart Tooltips

Auto-positioning tooltips with manual override options and smooth transitions.

🎭

Modal Mask

Optional backdrop overlay for focused interactions and easy dismissal.

⌨️

Keyboard Accessible

Full keyboard navigation with Tab, Enter, and Escape support.

🎨

Customisable

Custom icons, colours, and styling. Works with emoji, SVG, or HTML icons.

🌙

Dark Mode

Automatic dark mode support via CSS media queries.

🚀

Zero Dependencies

Pure Svelte 5 with no external libraries. Copy-paste ready.

Props Reference

Prop	Type	Default	Description
`actions`	SpeedDialAction[]	[]	Array of action items to display
`direction`	'up' \| 'down' \| 'left' \| 'right'	'up'	Direction for linear layouts / start angle for circular
`type`	'linear' \| 'circle' \| 'semi-circle' \| 'quarter-circle'	'linear'	Layout arrangement of action items
`radius`	number	80	Distance from center for circular layouts (px)
`transitionDelay`	number	30	Stagger delay between item animations (ms)
`showTooltip`	boolean	true	Show tooltip labels on hover
`tooltipPosition`	'auto' \| 'left' \| 'right' \| 'top' \| 'bottom'	'auto'	Position of tooltips relative to items
`mask`	boolean	false	Show modal backdrop when open
`disabled`	boolean	false	Disable the SpeedDial
`buttonIcon`	string	'+' SVG	Custom icon for main button (emoji, HTML, or SVG)
`buttonLabel`	string	'Open menu'	Accessible label for main button
`isOpen`	boolean	false	Bindable state for open/closed

SpeedDialAction Interface

Property	Type	Required	Description
`id`	string	Yes	Unique identifier for the action
`label`	string	Yes	Accessible label (shown in tooltip)
`icon`	string	Yes	Emoji, HTML, or SVG string for icon
`onclick`	() => void	No	Callback when action is clicked
`disabled`	boolean	No	Disable this action
`class`	string	No	Additional CSS classes

Quick Start Guide

Copy the Component

Copy SpeedDial.svelte from src/lib/components/ and the type definitions from src/lib/types.ts to your project.

Define Your Actions

Create an array of SpeedDialAction objects with id, label, icon, and onclick handler for each action.

Choose Layout & Position

Select the layout type and direction that fits your UI. Position the SpeedDial using CSS (e.g., fixed bottom-4 right-4).