Skip to content

shadcn.io is an independent project built on shadcn/ui

Components

Free

Download Trigger for Radix UI

Save a Blob or a string as a named file from any button, even when the data comes from a promise. For React, when the file is built in the browser.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { DownloadIcon, FileTextIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DownloadTrigger } from "@/components/ui/download-trigger";
import { Item, ItemTitle } from "@/components/ui/item";
const DownloadTriggerDemo = () => (
  <div className="flex flex-col gap-4">
    <Item variant="outline">
      <FileTextIcon />
      <ItemTitle>{content}</ItemTitle>
    </Item>
    <DownloadTrigger
      asChild
      data={content}
      fileName="hello.txt"
      mimeType="text/plain"
    >
      <Button size="lg" variant="outline">
        <DownloadIcon />
        Download
      </Button>
    </DownloadTrigger>
  </div>
);

const content = "Hello, World! This is a sample text file.";

Accessibility

Enter
Activate the focused control.
Space
Activate the focused control.

Demos

Download Svg

Promise

FAQ

What can I pass as the data of a DownloadTrigger?

A Blob, a string, a promise of either, or a function that returns one. A string is wrapped in a Blob with your mimeType, which defaults to text/plain. A Blob keeps its own type.

How do I set the file name and type?

fileName is the name the browser saves under, such as report.csv. mimeType sets the type when data is a string, for example application/json. Both are props on the trigger.

Can the file be built when the user clicks?

Yes. Pass a function or a promise and it is awaited on click, then saved. The Promise demo on this page does this, so the file can come from a fetch or a canvas without being prepared in advance.

How do I use my own Button as the trigger?

Pass asChild and put your element inside: the trigger adds the download to its click handler and keeps the child's own onClick. Without it, DownloadTrigger renders a plain button with type="button".

How do I stop a download from an onClick handler?

Call event.preventDefault() in your onClick. The trigger runs your handler first and does not download when the event was prevented, so you can validate or ask before saving.

How does it save the file without a server?

It makes an object URL from the Blob, clicks a temporary link with a download attribute, and revokes the URL. Everything happens in the browser, so no request is made and nothing is uploaded.

How do I install Download Trigger in React?

Run the command in the Installation section on this page. It adds one file, download-trigger, to your components folder and nothing else.

API Reference

DownloadTrigger

<button> data-slot="download-trigger"

PropType
dataDownloadData

What to download: a Blob or a string, a promise of one, or a function that returns either.

fileNamestring

The name the file saves under, such as notes.txt.

mimeType?string

The file's type when data is a string, such as application/json.

Default
"text/plain"
asChild?boolean

Merge props onto the child element instead of rendering a host.