FloatingActionButton

floatingactionbutton-1779394025978.tsx

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

const ACTIONS = [
  { icon:'📝', label:'New Note', color:'#6d28d9' },
  { icon:'📷', label:'Upload', color:'#2563eb' },
  { icon:'📊', label:'Report', color:'#0891b2' },
]

export default function FloatingActionButton() {
  const [open, setOpen] = useState(false)
  return (
    <div style={{ position:'relative', display:'inline-flex', flexDirection:'column-reverse', alignItems:'center', gap:'10px' }}>
      {open && ACTIONS.map((action, i) => (
        <div key={action.label} style={{
          display:'flex', alignItems:'center', gap:'8px',
          animation:'popIn 0.2s ease ' + (i * 0.05) + 's both',
        }}>
          <span style={{
            background:'#1e1e2e', color:'#fff', padding:'4px 10px',
            borderRadius:'6px', fontSize:'12px', fontWeight:500, whiteSpace:'nowrap',
            boxShadow:'0 2px 8px rgba(0,0,0,0.2)',
          }}>{action.label}</span>
          <button style={{
            width:'44px', height:'44px', borderRadius:'50%', border:'none',
            background:action.color, color:'#fff', fontSize:'18px',
            cursor:'pointer', boxShadow:'0 4px 12px rgba(0,0,0,0.2)',
          }}>{action.icon}</button>
        </div>
      ))}
      <button onClick={() => setOpen(!open)} style={{
        width:'56px', height:'56px', borderRadius:'50%', border:'none',
        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.25s ease',
      }}>+</button>
      <style>{'@keyframes popIn{from{opacity:0;transform:scale(0.7) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}'}</style>
    </div>
  )
}

Component info

CategoryButtons

Frameworkreact

TierFREE

Copies0

About

Expandable FAB with action menu and smooth animations

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