Floating Action Button

The Floating Action Button (FAB) is a circular button that floats above the content and provides quick access to primary actions. It features smooth animations and expandable action buttons.

Features

• Smooth Animations: Uses Framer Motion for fluid transitions
• Expandable Actions: Click to reveal additional action buttons
• Hover Effects: Interactive feedback with scale animations
• Accessible: Proper ARIA labels and keyboard navigation
• Customizable: Easy to modify colors, icons, and actions

Installation

npm install motion/react lucide-react clsx sonner

Basic Usage

import { FloatingActionButton } from "@/components/snippets/floating-action-button/code";

export function FABDemo() {
  return (
    <>
      <FloatingActionButton
        actions={[
          {
            icon: <MessageCircle size={18} />,
            label: "Message",
            onClick: () => toast("Message clicked"),
          },
          {
            icon: <Share size={18} />,
            label: "Share",
            onClick: () => toast("Share clicked"),
          },
          {
            icon: <Bookmark size={18} />,
            label: "Bookmark",
            onClick: () => toast("Bookmark clicked"),
          },
        ]}
      />
    </>
  );
}

Props

Changing Colors

You can customize the colors by modifying the background classes:

// Change main FAB color
className = "bg-red-500 hover:bg-red-600";

// Change action button colors
className = "bg-indigo-500 hover:bg-indigo-600";

Adding More Actions

To add more action buttons, simply add more motion.button elements within the action buttons container:

<motion.button
  variants={{
    closed: { scale: 0, opacity: 0 },
    open: { scale: 1, opacity: 1 },
  }}
  transition={{ duration: 0.2, delay: 0.15 }}
  className="flex h-12 w-12 items-center justify-center rounded-full bg-orange-500 text-white shadow-lg hover:bg-orange-600"
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
>
  <span className="text-sm font-medium">Edit</span>
</motion.button>

Changing Icons

Replace the Lucide icons with your preferred icons:

import { Heart, MessageCircle, Share2 } from "lucide-react";

// Use different icons
<Heart className="h-6 w-6" />
<MessageCircle className="h-6 w-6" />
<Share2 className="h-6 w-6" />

Animation Variants

The component uses Framer Motion variants for smooth animations:

• Scale Animation: Buttons scale from 0 to 1 when opening
• Opacity Animation: Fade in/out effect for smooth transitions
• Rotation Animation: Main button icon rotates 45 degrees when opened
• Staggered Delays: Action buttons appear with slight delays for a cascading effect

Accessibility

The component includes proper accessibility features:

• Focus management with visible focus rings
• ARIA labels for screen readers
• Keyboard navigation support
• Proper button semantics

Dependencies

• motion/react: For animations
• lucide-react: For icons
• tailwindcss: For styling