Components
Loading preview...
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).
@bundui
npx shadcn@latest add https://21st.dev/r/bundui/floating-buttonimport { 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 };