Quick Actions

Floating action button (FAB) with expandable action menu for quick access.

Preview

The Quick Actions FAB is fixed to the bottom-right corner of the viewport. Check the main demo page to see it in action.

Usage

import { QuickActions } from "@/components/profile"

<QuickActions
  actions={[
    { 
      id: "share", 
      icon: <Share2 className="w-5 h-5" />, 
      label: "Share", 
      color: "bg-blue-500",
      onClick: () => openShare()
    },
    { 
      id: "message", 
      icon: <MessageCircle className="w-5 h-5" />, 
      label: "Message", 
      color: "bg-green-500",
      onClick: () => openChat()
    },
    { 
      id: "cart", 
      icon: <ShoppingBag className="w-5 h-5" />, 
      label: "Cart (3)", 
      color: "bg-orange-500",
      onClick: () => openCart()
    },
  ]}
  position="bottom-right"
/>

Positions

bottom-right

bottom-left

top-right

top-left

Props

Prop	Type	Default
actions	QuickAction[]	required
position	"bottom-right" \| "bottom-left" \| ...	"bottom-right"
mainIcon	ReactNode	Plus icon

QuickAction Interface

interface QuickAction {
  id: string
  icon: ReactNode
  label: string
  color: string      // Tailwind bg class
  onClick: () => void
}