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

`DownloadButton` requests a presigned GET URL and triggers a native browser download.

## Preview [#preview]

<DemoPreview name="download-button-demo.tsx">
  <DownloadButtonDemo />
</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 { DownloadButton } from "@dimah-s3/ui";
```

</Tab>

<Tab value="shadcn registry">

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

</Tab>

</Tabs>

---

## Usage [#usage]

```tsx
"use client";

import { useDownload } from "@dimah-s3/react";
import { DownloadButton } from "@dimah-s3/ui";

export function AvatarDownloader({ avatarKey }: { avatarKey: string }) {
  const download = useDownload({ route: "avatar" });

  return (
    <DownloadButton
      download={download}
      objectKey={avatarKey}
      variant="outline"
    />
  );
}
```

---

## Props [#props]

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

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

## 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 fetch-mode or failed attachment, or call
`download.reset()` yourself.

</Accordion>

<Accordion title="Can multiple list items share one useDownload hook?">

Yes. `useDownload` tracks `objectKey` internally so loading states and status toasts only affect the button matching the active key.

</Accordion>

<Accordion title="How do I show download progress instead of a spinner?">

Use the [`ProgressDownloadButton`](https://v1.s3.dimah.dev/docs/react/ui/components/progress-download-button) component paired with `useDownload({ route, mode: "fetch" })`.

</Accordion>

</Accordions>