Speed Dial — ARC UI

Components

Speed Dial

navigation

interactive

<arc-speed-dial>

Overview

Guidelines

When to use

Limit secondary actions to two to five items for quick scanning
Use recognisable icons for each action — tooltips can add context
Place in bottom-right for right-handed thumb reach on mobile
Use SpeedDial for creation or composition actions that benefit from quick access
Close the dial after an action is selected to avoid visual clutter

When not to use

Use SpeedDial for navigation — it is for actions, not route changes
Add more than five actions — use a full menu or action sheet instead
Place SpeedDial in a scrollable container — it should float above content
Use text labels on the action items — icons only keeps the pattern compact
Show SpeedDial on desktop when a toolbar with labelled buttons would be clearer

Features

Floating action button with staggered scale-in animation
Configurable fan direction: up, down, left, or right
Fixed position in bottom-right or bottom-left corner
arc-open and arc-close events for state tracking
arc-action event with index of selected item
Auto-close on outside click or Escape keypress
Keyboard accessible with Tab and Enter activation
Accent-primary glow on trigger and action items
Token-driven theming via CSS custom properties

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-speed-dial direction="up" position="bottom-right" id="dial">
  <arc-icon-button slot="action" name="pencil-simple" aria-label="Edit"></arc-icon-button>
  <arc-icon-button slot="action" name="image" aria-label="Image"></arc-icon-button>
  <arc-icon-button slot="action" name="share" aria-label="Share"></arc-icon-button>
</arc-speed-dial>

<script>
  const dial = document.querySelector('#dial');
  dial.addEventListener('arc-action', (e) => {
    console.log('action index:', e.detail.index);
  });
</script>

import { SpeedDial, IconButton } from '@arclux/arc-ui-react';

export function QuickActions() {
  return (
    <SpeedDial
      direction="up"
      position="bottom-right"
      onArcAction={(e) => console.log('action:', e.detail.index)}
    >
      <IconButton slot="action" icon="edit" aria-label="Edit" />
      <IconButton slot="action" icon="image" aria-label="Image" />
      <IconButton slot="action" icon="share" aria-label="Share" />
    </SpeedDial>
  );
}

<script setup>
import { SpeedDial, IconButton } from '@arclux/arc-ui-vue';

function onAction(e) {
  console.log('action:', e.detail.index);
}
</script>

<template>
  <SpeedDial direction="up" position="bottom-right" @arc-action="onAction">
    <IconButton slot="action" icon="edit" aria-label="Edit" />
    <IconButton slot="action" icon="image" aria-label="Image" />
    <IconButton slot="action" icon="share" aria-label="Share" />
  </SpeedDial>
</template>

<script>
  import { SpeedDial, IconButton } from '@arclux/arc-ui-svelte';
</script>

<SpeedDial
  direction="up"
  position="bottom-right"
  on:arc-action={(e) => console.log('action:', e.detail.index)}
>
  <IconButton slot="action" icon="edit" aria-label="Edit" />
  <IconButton slot="action" icon="image" aria-label="Image" />
  <IconButton slot="action" icon="share" aria-label="Share" />
</SpeedDial>

import { Component } from '@angular/core';
import { SpeedDial, IconButton } from '@arclux/arc-ui-angular';

@Component({
  imports: [SpeedDial, IconButton],
  template: `
    <SpeedDial
      direction="up"
      position="bottom-right"
      (arc-action)="onAction($event)"
    >
      <IconButton slot="action" icon="edit" aria-label="Edit" />
      <IconButton slot="action" icon="image" aria-label="Image" />
      <IconButton slot="action" icon="share" aria-label="Share" />
    </SpeedDial>
  `,
})
export class QuickActionsComponent {
  onAction(e: CustomEvent) {
    console.log('action:', e.detail.index);
  }
}

import { SpeedDial, IconButton } from '@arclux/arc-ui-solid';

export function QuickActions() {
  return (
    <SpeedDial
      direction="up"
      position="bottom-right"
      onArcAction={(e) => console.log('action:', e.detail.index)}
    >
      <IconButton slot="action" icon="edit" aria-label="Edit" />
      <IconButton slot="action" icon="image" aria-label="Image" />
      <IconButton slot="action" icon="share" aria-label="Share" />
    </SpeedDial>
  );
}

import { SpeedDial, IconButton } from '@arclux/arc-ui-preact';

export function QuickActions() {
  return (
    <SpeedDial
      direction="up"
      position="bottom-right"
      onArcAction={(e) => console.log('action:', e.detail.index)}
    >
      <IconButton slot="action" icon="edit" aria-label="Edit" />
      <IconButton slot="action" icon="image" aria-label="Image" />
      <IconButton slot="action" icon="share" aria-label="Share" />
    </SpeedDial>
  );
}

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the secondary actions are currently visible.
`direction`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	The direction in which child actions fan out from the trigger.
`position`	`'bottom-right' \| 'bottom-left'`	`'bottom-right'`	Fixed viewport corner where the speed dial is anchored.
`items`	`Array<{ icon: string, label: string, action?: string }>`	`[]`	Array of secondary action items to display when the speed dial is open. Each item needs an icon and label.

Events

Event	Description
`arc-open`	Fired when the speed dial expands.
`arc-close`	Fired when the speed dial collapses.
`arc-action`	Fired when a secondary action is selected with detail: { index }.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight