Speed Dial
Click the floating button in the bottom corner to reveal quick actions.
Overview
The Floating Action Button (FAB) is a staple of modern web applications. When clicked, it expands into a "speed-dial" menu of quick actions (like creating a new post, sending an email, or opening support).
This implementation elevates the standard FAB using Framer Motion. The menu items stagger in with a satisfying spring physics animation, and the main icon smoothly morphs (rotates 45 degrees) to become a close button. It also handles outside clicks automatically to ensure it doesn't stay open unintentionally.
Usage
import { FloatingActionButton } from "@/components/creative/floating-action-button"
import { Mail, MessageCircle, FileText } from "lucide-react"
export default function App() {
const actions = [
{ id: 1, icon: <Mail />, label: "Email", onClick: () => {} },
{ id: 2, icon: <MessageCircle />, label: "Chat", onClick: () => {} },
]
return (
<div>
{/* Your app content */}
<FloatingActionButton actions={actions} position="bottom-right" />
</div>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { FloatingActionButton } from "@/components/creative/floating-action-button";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { FloatingActionButton } from "@/components/creative/floating-action-button";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<FloatingActionButton
actions{/* value */}
position{/* value */}
icon{/* value */}
/>
</div>
);
}