Speed Dial

Overview

The SpeedDial component provides a mobile-friendly floating action button that expands to reveal a set of quick action items with smooth animations and keyboard accessibility.

Subcomponents & hooks:

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

orientation

direction

size

intent

styling

shape

elevation

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"
`direction?`	enum	"reverse"
`size?`	enum	"md"
`intent?`	enum	"primary"
`styling?`	enum	"solid"
`shape?`	enum	"pill"
`elevation?`	enum	"raised"
`defaultOpen?`	boolean	false
`className?`	string	-

`SpeedDial.Trigger`

The trigger button that opens/closes the menu. Inherits variant props from the root.

Prop	Type	Default
`children`	React.ReactNode	-
`className?`	string	-
`...props?`	ButtonProps	-

`SpeedDial.Menu`

The animated container for speed dial items.

Prop	Type	Default
`children`	React.ReactNode	-
`className?`	string	-

`SpeedDial.Item`

Individual action item with icon and link.

Prop	Type	Default
`item`	SpeedDialItemData	-
`index?`	number	0
`className?`	string	-
`...props?`	ComponentProps<"a">	-

Accessibility

Full keyboard navigation support (Escape to close)
Proper ARIA attributes for menu role
Focus management on open/close
Screen reader friendly labels

Credits

Inspired by Material Design's Speed Dial pattern
Built with Motion for smooth animations
Uses the Button component internally

Speed Dial

On this page