Speed Dial

orientation

expansion

size

intent

styling

shape

elevation

The SpeedDial component provides a mobile-friendly floating action button that expands to reveal a set of quick action items. Built with Framer Motion, it delivers smooth staggered animations and full keyboard accessibility.

Key Features

Staggered animations — Items reveal with cascading entrance/exit effects
Keyboard navigation — Full arrow key support with Escape to close
Focus management — Auto-focus on open with proper focus trapping
Link obfuscation — Optional base64-encoded hrefs for spam protection
Orientation support — Vertical or horizontal menu layouts

Anatomy

SpeedDial — Root component (context provider, keyboard handling)
SpeedDial.Trigger — Toggle button to open/close the menu
SpeedDial.Menu — Animated container for action items
SpeedDial.Item — Individual action item with icon and link
useSpeedDial() — Hook for custom integrations

Installation

Usage

Basic

import {
  SpeedDial,
  type SpeedDialItemData,
} from '@/components/azemmur/components/speed-dial';
import { IconPlus, IconBrandGithub, IconMail } from '@tabler/icons-react';

const items: SpeedDialItemData[] = [
  {
    title: 'GitHub',
    icon: <IconBrandGithub className="size-full" />,
    href: 'https://github.com',
  },
  {
    title: 'Email',
    icon: <IconMail className="size-full" />,
    href: 'mailto:hello@example.com',
  },
];

export default function Example() {
  return (
    <SpeedDial intent="primary" size="md">
      <SpeedDial.Trigger>
        <IconPlus className="size-5" />
      </SpeedDial.Trigger>
      <SpeedDial.Menu>
        {items.map((item, index) => (
          <SpeedDial.Item key={item.title} item={item} index={index} />
        ))}
      </SpeedDial.Menu>
    </SpeedDial>
  );
}

Obfuscated Links

For email protection or other anti-scraping needs, use base64-encoded hrefs with the obfuscated flag:

const items: SpeedDialItemData[] = [
  {
    title: 'Email',
    icon: <IconMail className="size-full" />,
    href: 'bWFpbHRvOmhlbGxvQGV4YW1wbGUuY29t', // base64 encoded
    obfuscated: true,
  },
];

Using `useSpeedDial()` for custom items

import { useSpeedDial } from '@/components/azemmur/components/speed-dial/speed-dial-context';

function CustomSpeedDialItem() {
  const { open, setOpen, intent, styling, size } = useSpeedDial();
  // Build custom speed dial item with context values
  return <div>Custom content</div>;
}

API Reference

`SpeedDial` (root)

Prop	Type	Default
`orientation?`	enum	"vertical"
`expansion?`	enum	"reverse"
`size?`	enum	"md"
`intent?`	enum	"primary"
`styling?`	enum	"solid"
`shape?`	enum	"pill"
`elevation?`	enum	"raised"
`defaultOpen?`	boolean	false
`className?`	string	-