Forza Button

Buttons

About

A themeable button with primary/secondary/ghost variants, size options, a loading spinner state and a trailing icon slot, ported from the Forza UI Vue component library.

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

Code

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

Usage.tsx

import FzButton from "@/components/ui/fz-button";
import { Plus } from "lucide-react";

export default function FzButtonDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center gap-4 bg-[#101416] p-10 text-[#f2efe6]">
      <FzButton
        variant="primary"
        trailing={<Plus size={16} strokeWidth={1.75} />}
      >
        Create build
      </FzButton>
      <FzButton variant="secondary">Reset</FzButton>
      <FzButton variant="ghost" disabled>
        Unavailable
      </FzButton>
    </div>
  );
}