"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface FloatingAction {
  id: string;
  label: string;
  icon?: React.ReactNode;
  onClick?: () => void;
  href?: string;
}

export interface FloatingActionButtonProps
  extends React.HTMLAttributes<HTMLDivElement> {
  actions: FloatingAction[];
  label?: string;
  icon?: React.ReactNode;
  placement?: "fixed" | "inline";
}

export function FloatingActionButton({
  actions,
  label = "Create",
  icon,
  placement = "fixed",
  className,
  ...props
}: FloatingActionButtonProps) {
  const [open, setOpen] = React.useState(false);
  const containerRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (!open) {
      return undefined;
    }

    const handleClickOutside = (event: MouseEvent) => {
      if (
        containerRef.current &&
        !containerRef.current.contains(event.target as Node)
      ) {
        setOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [open]);

  React.useEffect(() => {
    if (!open) {
      return undefined;
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpen(false);
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [open]);

  const placementClasses =
    placement === "fixed" ? "fixed bottom-6 right-6" : "relative";

  return (
    <div
      ref={containerRef}
      className={cn(
        "z-50 flex flex-col items-end gap-3",
        placementClasses,
        className
      )}
      {...props}
    >
      <div
        className={cn(
          "flex flex-col items-end gap-2 transition-all",
          open
            ? "translate-y-0 opacity-100"
            : "pointer-events-none translate-y-2 opacity-0"
        )}
      >
        {actions.map((action) => {
          const ActionComponent: React.ElementType = action.href
            ? "a"
            : "button";

          return (
            <div
              key={action.id}
              className="flex items-center gap-3"
            >
              <span className="rounded-full border border-border bg-card px-3 py-1 text-xs text-foreground shadow-sm">
                {action.label}
              </span>
              <ActionComponent
                {...(action.href ? { href: action.href } : { type: "button" })}
                onClick={() => {
                  action.onClick?.();
                  setOpen(false);
                }}
                className={cn(
                  "flex h-11 w-11 items-center justify-center rounded-full border border-border",
                  "bg-card text-foreground shadow-md transition-colors",
                  "hover:bg-muted",
                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border"
                )}
                aria-label={action.label}
              >
                {action.icon ? (
                  <span className="text-muted-foreground">
                    {action.icon}
                  </span>
                ) : null}
              </ActionComponent>
            </div>
          );
        })}
      </div>
      <button
        type="button"
        onClick={() => setOpen((prev) => !prev)}
        className={cn(
          "flex h-14 w-14 items-center justify-center rounded-full",
          "border border-border bg-accent text-accent-foreground shadow-lg",
          "transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border",
          open && "rotate-45"
        )}
        aria-expanded={open}
        aria-label={label}
      >
        {icon ?? <PlusIcon className="h-6 w-6" />}
      </button>
    </div>
  );
}

function PlusIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        d="M10 4V16"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
      <path
        d="M4 10H16"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
    </svg>
  );
}
Floating Action Button

Dependencies

Files

Installation
