Download Trigger

Used to trigger a download of a file.

Usage

import { DownloadTrigger } from "chakra-ui-solid";

<DownloadTrigger data="..." fileName="x.png" mimeType="image/png" />

Examples

Basic

Pass the data you want to download to the data prop, and specify the fileName and mimeType of the file.

DownloadTrigger has no styles of its own — it renders a bare button. The render prop is how it gets a look: the download behaviour lands on whatever component you hand it, a Button in every example here.

Download SVG

Here’s an example of how to download an SVG file.

Promise

You can also trigger downloads from a promise that returns a Blob, File, or string.

A promise that rejects is left to reject — put a catch inside your own data function if a failed download should say something.

Props

DownloadTriggerProps
Prop	Default	Type
`data`*	—	`DownloadableData \| (() => DownloadableData \| Promise<DownloadableData>)` The bytes themselves, or a function returning them — and that function may return a promise, so a file that has to be fetched or generated is only produced when the download is asked for.
`fileName`*	—	`string` The name the browser saves the file under.
`mimeType`*	—	`FileMimeType` The file's MIME type. It decides what the browser does with the bytes — `text/plain` and `image/svg+xml` are read as text, anything else as binary — and it is also what a `Blob` built from a string is tagged with.

Plus HTMLChakraProps<"button"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

CreateDownloadProps
Prop	Default	Type
`data`*	—	`DownloadableData \| (() => DownloadableData \| Promise<DownloadableData>)` The bytes themselves, or a function returning them — and that function may return a promise, so a file that has to be fetched or generated is only produced when the download is asked for.
`fileName`*	—	`string` The name the browser saves the file under.
`mimeType`*	—	`FileMimeType` The file's MIME type. It decides what the browser does with the bytes — `text/plain` and `image/svg+xml` are read as text, anything else as binary — and it is also what a `Blob` built from a string is tagged with.

Plus the three every component takes: as, render and unstyled.

Every prop is read at the moment of the click rather than when the trigger renders, so a fileName or data driven by a signal names and produces whatever it is by then.

createDownload is the same behaviour without the button — call it to hang a download off anything:

const { download } = createDownload({
  fileName: "notes.txt",
  mimeType: "text/plain",
  data: () => editor.value,
});