SpeedDial

speeddial-1779394345484.tsx

'use client'
import { useState } from 'react'

const ACTIONS = [
  { icon:'✏️', label:'Edit', angle:-90 },
  { icon:'📤', label:'Share', angle:-45 },
  { icon:'🗑️', label:'Delete', angle:-135 },
  { icon:'📋', label:'Copy', angle:180 },
]

export default function SpeedDial() {
  const [open, setOpen] = useState(false)
  return (
    <div style={{ position:'relative', width:'200px', height:'200px', display:'flex', alignItems:'center', justifyContent:'center' }}>
      {ACTIONS.map((action, i) => {
        const rad = (action.angle * Math.PI) / 180
        const dist = open ? 80 : 0
        const x = Math.cos(rad) * dist
        const y = Math.sin(rad) * dist
        return (
          <div key={action.label} style={{ position:'absolute', zIndex:10 }}>
            <div style={{
              transform: 'translate(' + x + 'px,' + y + 'px)',
              transition: 'transform ' + (0.15 + i * 0.05) + 's ease',
              opacity:open?1:0,
            }}>
              <button title={action.label} style={{
                width:'44px', height:'44px', borderRadius:'50%', border:'none',
                background:'#fff', boxShadow:'0 4px 15px rgba(0,0,0,0.15)',
                cursor:'pointer', fontSize:'20px', transition:'transform 0.15s',
              }}
                onMouseEnter={e=>e.currentTarget.style.transform='scale(1.15)'}
                onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'}
              >{action.icon}</button>
            </div>
          </div>
        )
      })}
      <button onClick={()=>setOpen(!open)} style={{
        width:'56px', height:'56px', borderRadius:'50%', border:'none', zIndex:20,
        background:'linear-gradient(135deg,#6d28d9,#2563eb)', color:'#fff',
        fontSize:'24px', cursor:'pointer', boxShadow:'0 6px 20px rgba(109,40,217,0.4)',
        transform:open?'rotate(45deg)':'rotate(0)', transition:'transform 0.3s ease',
        position:'relative',
      }}>+</button>
    </div>
  )
}

Component info

CategoryButtons

Frameworkreact

TierFREE

Copies0

About

Speed dial button group with radial action layout

More from Buttons

import { motion, useMotionValue, useSpring } from 'framer-motion';
import React from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
  className?: string;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children, cl

MagneticButton

Buttons

'use client';

import React, { useState, useEffect } from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children }) => {
  const [x, setX] = useState(0);
  const [y,

MagneticButton

Buttons

'use client';

import { useState } from 'react';

interface GlowButtonProps {
  children: React.ReactNode;
}

const GlowButton: React.FC<GlowButtonProps> = ({ children }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseE

GlowButton

Buttons

import React from 'react';
import { motion } from 'framer-motion';

interface LiquidButtonProps {
  children: React.ReactNode;
}

const LiquidButton: React.FC<LiquidButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{

LiquidButton

Buttons