Download Trigger

Used to trigger a download of a file.

AI TipWant to skip the docs? Use the MCP Server

Usage

import { DownloadTrigger } from "@chakra-ui/react"

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

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

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

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

Compose the DownloadTrigger with the FormatByte component to display the size of the file in a human-readable format.

Prop	Default	Type
`spinnerPlacement`	`start`	`'start' \| 'end' \| undefined` The placement of the spinner
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`md`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` The size of the component
`variant`	`solid`	`'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain'` The variant of the component
`loading`		`boolean \| undefined` If `true`, the button will show a loading spinner.
`loadingText`		`React.ReactNode \| undefined` The text to show while loading.
`spinner`		`React.ReactNode \| undefined` The spinner to show while loading.
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.