Components
SpeedDial
A floating trigger that expands to reveal a stack of quick actions.
SpeedDial is a round trigger that fans out a short list of actions when
opened, each with an optional icon and its own onClick. Selecting an action
runs it and closes the dial. Use it to surface two to four related shortcuts
from a single floating affordance; set ariaLabel to name the trigger and
optionally override its icon.
Example
Preview
import { SpeedDial } from '@officina/ui';
import { FileText, Image, Link } from 'lucide-react';
<SpeedDial
ariaLabel="Add content"
actions={[
{ label: 'Document', icon: <FileText />, onClick: addDoc },
{ label: 'Image', icon: <Image />, onClick: addImage },
{ label: 'Link', icon: <Link />, onClick: addLink },
]}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| actions* | SpeedDialAction[] | — | Actions revealed when the dial expands. |
| ariaLabel | string | Open actions | Accessible name for the trigger button. |
| icon | ReactNode | — | Custom trigger icon. Defaults to a plus. |