Components
Progress Download Button
Download button with animated progress indicator and in-flight cancellation.
ProgressDownloadButton streams a download with browser fetch, displays
live progress, and supports cancellation.
Preview
Install
Complete UI Setup first — stylesheet and toaster. Then add this component:
import { ProgressDownloadButton } from "@dimah-s3/ui";Usage
"use client";
import { useDownload } from "@dimah-s3/react";
import { ProgressDownloadButton } from "@dimah-s3/ui";
export function DocumentDownloader({ documentKey }: { documentKey: string }) {
const download = useDownload({
route: "document",
mode: "fetch",
});
return <ProgressDownloadButton download={download} objectKey={documentKey} />;
}Props
import type { ProgressDownloadButtonProps } from "@dimah-s3/ui";Frequently asked questions
Use the dismiss control on a completed or failed attachment, or call
download.reset() yourself.
Click the button while a download is active to abort the underlying fetch stream and reset the button state.
Yes. The download request passes through the server route guards and obtains a signed URL before the fetch stream starts; the bucket does not need to be public.