Floating Button

Buttons 95

About

A floating button is a common UI component used in user interfaces. It typically appears as a button "floating" over other content, often positioned in a corner of the screen. This button allows users to quickly perform a key action. It is also known as a Floating Action Button (FAB).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Floating Button to your project and fits it to your theme.

Code

How Floating Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FloatingButton, FloatingButtonItem }  from "@/components/ui/floating-button";
import { cn } from "@/lib/utils";
import { DribbbleIcon, FacebookIcon, LinkedinIcon, PlusIcon } from "lucide-react";

function FloatingButtonExample() {
  const items = [
    {
      icon: <FacebookIcon />,
      bgColor: 'bg-[#1877f2]'
    },
    {
      icon: <DribbbleIcon />,
      bgColor: 'bg-[#ea4c89]'
    },
    {
      icon: <LinkedinIcon />,
      bgColor: 'bg-[#0a66c2]'
    }
  ];

  return (
    <FloatingButton
      triggerContent={
        <button className="flex items-center justify-center h-12 w-12 rounded-full bg-black dark:bg-slate-800 text-white/80 z-10">
          <PlusIcon />
        </button>
      }>
      {items.map((item, key) => (
        <FloatingButtonItem key={key}>
          <button
            className={cn(
              'h-12 w-12 rounded-full flex items-center justify-center text-white/80',
              item.bgColor
            )}>
            {item.icon}
          </button>
        </FloatingButtonItem>
      ))}
    </FloatingButton>
  );
}

export { FloatingButtonExample };