# Progress Download Button (https://v1.s3.dimah.dev/docs/react/ui/components/progress-download-button)

`ProgressDownloadButton` streams a download with browser `fetch`, displays
live progress, and supports cancellation.

## Preview [#preview]

<DemoPreview name="progress-download-demo.tsx">
  <ProgressDownloadDemo />
</DemoPreview>

## Install [#install]

Complete [UI Setup](https://v1.s3.dimah.dev/docs/react/ui) first — stylesheet and toaster. Then
add this component:

<Tabs items={["npm package", "shadcn registry"]}>

<Tab value="npm package">

```tsx
import { ProgressDownloadButton } from "@dimah-s3/ui";
```

</Tab>

<Tab value="shadcn registry">

```npm
npx shadcn@latest add @dimah-s3/progress-download-button
```

</Tab>

</Tabs>

---

## Usage [#usage]

```tsx
"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", // [!code ++]
  });

  return <ProgressDownloadButton download={download} objectKey={documentKey} />;
}
```

---

## Props [#props]

```ts
import type { ProgressDownloadButtonProps } from "@dimah-s3/ui";
```

<AutoTypeTable
  path="packages/ui/src/components/dimah-s3/download/progress-download-button.tsx"
  name="ProgressDownloadButtonProps"
/>

## Frequently asked questions [#frequently-asked-questions]

<Accordions>

<Accordion title="How do I dismiss the status row after a download?">

Use the dismiss control on a completed or failed attachment, or call
`download.reset()` yourself.

</Accordion>

<Accordion title="How does cancellation work?">

Click the button while a download is active to abort the underlying fetch
stream and reset the button state.

</Accordion>

<Accordion title="Does this work with private buckets?">

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.

</Accordion>

</Accordions>