Floating Action Button

Buttons

About

A square, fixed-position floating action button (FAB) that docks to the bottom-right or bottom-left of the viewport, ported from the Zemponet ZFab Vue component for triggering a primary page action like "create new".

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import ZFab from "@/components/ui/zfab";

function PlusIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  );
}

export default function ZFabDemo() {
  return (
    <div
      className="relative h-[420px] w-full overflow-hidden border border-black/10 bg-white text-black"
      style={{ contain: "layout" }}
    >
      <div className="p-6">
        <h2 className="text-base font-medium">Task board</h2>
        <p className="mt-1 text-sm text-neutral-500">
          Click the button in the corner to create a new task
        </p>
      </div>
      <ZFab label="New task" onClick={() => console.log("create task")}>
        <PlusIcon />
      </ZFab>
    </div>
  );
}