Download Trigger for Ark UI

Trigger file downloads programmatically.

PreviewCode

Hello, World! This is a sample text file.

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

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

PreviewCode

Promise

PreviewCode

API Reference

DownloadTrigger

data-slot="download-trigger"

PropType

dataDownloadableData | (() → MaybePromise<DownloadableData>)

The data to download.

Type: DownloadableData | (() → MaybePromise<DownloadableData>)

fileNamestring

The name of the file to download.

The MIME type of the data to download.

Type: ImageFileMimeType | ApplicationFileMimeType | TextFileMimeType | FontFileMimeType | VideoFileMimeType | AudioFileMimeType | FileMimeTypeGroup | AnyString

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.