Download Button

Buttons 7

About

A button that morphs through download, downloading, and downloaded states with a crossfading icon and label so users get inline progress feedback without a separate progress bar.

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

Code

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

Usage.tsx

import { DownloadButton } from "@/components/ui/download-button";

export default function DownloadButtonDemo() {
  const fetchFile = () => {
    // simulate a file download trigger
    console.log("downloading file...");
  };

  return (
    <div className="flex min-h-[240px] w-full items-center justify-center">
      <DownloadButton label="Download" onDownload={fetchFile} />
    </div>
  );
}