SpeedDial

When pressed, a floating action button can display three to six related actions in the form of a Speed Dial.

If more than six actions are needed, something other than a FAB should be use to present them.

Basic SpeedDial

The floating action button can display related actions.

Preview

Usage


import { SpeedDial, SpeedDialAction, SpeedDialAction, SpeedDialIcon, IconButton } from 'archi-ui'


<SpeedDial
  icon={<SpeedDialIcon icon={'+'} openIcon={'X'} open={openSpeedDial} />}
  open={true}
>
  <SpeedDialActions direction='up'>
    <SpeedDialAction
      icon={<IconButton color='warning' className='hover:bg-gray-200' size='sm'><span>S</span></IconButton>}
      tooltipOpen
      arrow
      placement='left'
      tooltipTitle="send"
      open={openSpeedDial}
    />
    <SpeedDialAction
      icon={<IconButton color='error' className='hover:bg-gray-200' size='sm'><span>D</span></IconButton>}
      tooltipOpen
      arrow
      placement='left'
      tooltipTitle="delete"
      open={openSpeedDial}
    />
    <SpeedDialAction
      icon={<IconButton color='info' className='hover:bg-gray-200' size='sm'><span>S</span></IconButton>}
      tooltipOpen
      arrow
      placement='left'
      tooltipTitle="share"
      open={openSpeedDial}
    />
    <SpeedDialAction
      icon={<IconButton color='success' className='hover:bg-gray-200' size='sm'><span>W</span></IconButton>}
      tooltipOpen
      arrow
      placement='left'
      tooltipTitle="whatsapp"
      open={openSpeedDial}
    />
  </SpeedDialActions>
</SpeedDial>

Playground

code


"use client"
 
import React, { useState } from 'react'
import { IconButton, SpeedDial, SpeedDialAction, SpeedDialIcon, Switch } from 'archi-ui';
import { Files, Pencil, Plus, Printer, Save, Share2 } from 'lucide-react';
 
export default function MyReactPage() {
 
  const [openSpeedDial, setOpenSpeedDial] = useState(true);
  const [direction, setDirection] = useState('up');
  const [placement, setPlacement] = useState('bottom-right');
  const [toolTipPlacement, setToolTipPlacement] = useState('left');
  const [openToolTip, setOpenToolTip] = useState(true);
  const [toolTipArrow, setToolTipArrow] = useState(true);
  const [hidden, setHidden] = useState(false);
 
  const handleHiddenChange = (event) => {
    setHidden(event.target.checked);
  }
 
  const handlDirectionChange = (event) => {
    setDirection(event.target.value);
  }
 
  const handleTooltipChange = (event) => {
    setOpenToolTip(event.target.checked);
  }
 
  const handleTooltipArrowChange = (event) => {
    setToolTipArrow(event.target.checked);
  }
 
  const handleTooltipPlacementChange = (event) => {
    setToolTipPlacement(event.target.value);
  }
 
  const handlPlacementChange = (event) => {
    setPlacement(event.target.value);
  }
 
  const actions = [
    {icon: <IconButton><Share2 /></IconButton>, name: 'Share'},
    {icon: <IconButton><Printer /></IconButton>, name: 'Print'},
    {icon: <IconButton><Save /></IconButton>, name: 'Save'},
    {icon: <IconButton><Files /></IconButton>, name: 'Copy'},
  ];
 
  return (
    <div className="relative">
      <div className="flex flex-col items-start gap-2">
        <div className='flex gap-2'>
          <Switch checked={hidden} onChange={handleHiddenChange} variant='standard' />
          <p>Hidden</p>
        </div>
        <div className='flex gap-2'>
          <Switch checked={openToolTip} onChange={handleTooltipChange} variant='standard' />
          <p>Tooltip</p>
        </div>
        <div className='flex gap-2'>
          <Switch checked={toolTipArrow} onChange={handleTooltipArrowChange} variant='standard' />
          <p>Tooltip arrow</p>
        </div>
        <div className='flex flex-col gap-2'>
          <p>Direction:</p>
          <div className="flex gap-2">
            <input type='radio' onChange={handlDirectionChange} value='up' checked={direction == 'up'} name='direction' id='up' />
            <label htmlFor="up">Up</label>
            <input type='radio' onChange={handlDirectionChange} value='right' checked={direction == 'right'} name='direction' id='right' />
            <label htmlFor="right">Right</label>
            <input type='radio' onChange={handlDirectionChange} value='down' checked={direction == 'down'} name='direction' id='down' />
            <label htmlFor="down">Down</label>
            <input type='radio' onChange={handlDirectionChange} value='left' checked={direction == 'left'} name='direction' id='left' />
            <label htmlFor="left">Left</label>
          </div>
          <p>Placement:</p>
          <div className="flex gap-2">
            <input type='radio' onChange={handlPlacementChange} value='top-left' checked={placement == 'top-left'} name='placement' id='top-left' />
            <label htmlFor="top-left">top-left</label>
            <input type='radio' onChange={handlPlacementChange} value='top-right' checked={placement == 'top-right'} name='placement' id='top-right' />
            <label htmlFor="top-right">top-right</label>
            <input type='radio' onChange={handlPlacementChange} value='bottom-left' checked={placement == 'bottom-left'} name='placement' id='bottom-left' />
            <label htmlFor="bottom-left">bottom-left</label>
            <input type='radio' onChange={handlPlacementChange} value='bottom-right' checked={placement == 'bottom-right'} name='placement' id='bottom-right' />
            <label htmlFor="bottom-right">bottom-right</label>
          </div>
          <p>Tooltip Placement:</p>
          <div className="flex gap-2">
            <input type='radio' onChange={handleTooltipPlacementChange} value='top' checked={toolTipPlacement == 'top'} name='toolTipPlacement' id='tooltip-top' />
            <label htmlFor="tooltip-top">top</label>
            <input type='radio' onChange={handleTooltipPlacementChange} value='right' checked={toolTipPlacement == 'right'} name='toolTipPlacement' id='tooltip-right' />
            <label htmlFor="tooltip-right">right</label>
            <input type='radio' onChange={handleTooltipPlacementChange} value='bottom' checked={toolTipPlacement == 'bottom'} name='toolTipPlacement' id='tooltip-bottom' />
            <label htmlFor="tooltip-bottom">bottom</label>
            <input type='radio' onChange={handleTooltipPlacementChange} value='left' checked={toolTipPlacement == 'left'} name='toolTipPlacement' id='tooltip-left' />
            <label htmlFor="tooltip-left">left</label>
          </div>
        </div>
      </div>
      <div className="relative w-full bg-accent" style={{ height: '360px' }}>
        <SpeedDial
          className='absolute'
          hidden={hidden}
          icon={<SpeedDialIcon icon={<Plus />} openIcon={<Pencil />} open={openSpeedDial} />}
          open={openSpeedDial}
          onClose={() => setOpenSpeedDial(false)}
          onOpen={() => setOpenSpeedDial(true)}
          direction={direction}
          placement={placement}
        >
          {actions.map((action) => (
            <SpeedDialAction
              key={action.name}
              icon={action.icon}
              tooltipTitle={action.name}
              tooltipOpen={openToolTip}
              tooltipPlacement={toolTipPlacement}
              arrow={toolTipArrow}
            />
          ))}
        </SpeedDial>
      </div>
    </div>
  );
}

Controlled speed Dial

The open state of the component can be controlled with the open / onOpen / onClose props.

Preview

Persistent action tooltips

The SpeedDialActions tooltips can be displayed persistently so that users don’t have to long press to see the tooltip on touch devices.

Preview

SpeedDial API

API reference docs for the React SpeedDial component.

Props

Name	Type	Default	Description
children	`node`	-	SpeedDialActions to display when the SpeedDial is open.
className	`string`	-	Override or extend the styles applied to the component.
direction	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	The direction the actions open relative to the floating action button.
placement	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'bottom-right'`	The placement of an SpeedDial, the position of the component is fixed(default).
FabProps	`object`	-	Props applied to the Fab element.
hidden	`bool`	`false`	If `true`, the SpeedDial is hidden.
icon	`node`	-	The icon to display in the SpeedDial Fab. Component provides a default Icon with animation.
open	`bool`	-	If `true`, the component is shown.
onClose	`func`	-	Callback fired when the component is requests to be closed. Signature: `function() => void`.
onOpen	`func`	-	Callback fired when the component is requests to be opened. Signature: `function() => void`.

SpeedDialAction API

API reference docs for the React SpeedDialAction component.

Props

Name	Type	Default	Description
className	`string`	-	Override or extend the styles applied to the component.
icon	`node`	-	The icon to display in the SpeedDialAction.
open	`bool`	-	If `true`, the component is shown.
tooltipOpen	`bool`	`false`	Make the tooltip always visible when the SpeedDial is open.
tooltipPlacement	`'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top'`	`'left'`	The placement of an SpeedDial, the position of the component is fixed(default).
tooltipTitle	`node`	-	Label to display in the tooltip.
arrow	`bool`	`false`	If `true`, tooltip arrow is shown.
tooltipClasses	`string`	-	`Classes` applied to the `Tooltip` element.
tooltipArrowClasses	`string`	-	`Classes` applied to the `tooltip arrow` element.
icon	`node`	-	The icon to display in the SpeedDial Fab. Component provides a default Icon with animation.
open	`bool`	-	If `true`, the component is shown.
onClose	`func`	-	Callback fired when the component is requests to be closed. Signature: `function() => void`.
onOpen	`func`	-	Callback fired when the component is requests to be opened. Signature: `function() => void`.

SpeedDialIcon API

API reference docs for the React SpeedDialIcon component.

Props

Name	Type	Default	Description
className	`string`	-	Override or extend the styles applied to the component.
icon	`node`	-	The icon to display.
openIcon	`node`	-	The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open.