Download Trigger
Used to trigger a download of a file or data
'use client'
import { Button, DownloadTrigger } from '@chakra-ui/react'
import { LuDownload } from 'react-icons/lu'
const data = 'The quick brown fox jumps over the lazy dog'
export const DownloadTriggerBasic = () => {
return (
<DownloadTrigger
data={data}
fileName="sample.txt"
mimeType="text/plain"
asChild
>
<Button variant="outline">
<LuDownload /> Download txt
</Button>
</DownloadTrigger>
)
}
Anatomy
import { DownloadTrigger } from '@chakra-ui/react'<DownloadTrigger data="..." fileName="sample.txt" mimeType="text/plain" />Examples
Basic
Pass the data, fileName and mimeType props to the DownloadTrigger
component to trigger a download of the data. Use the asChild prop to render a
custom trigger, like a Button.
'use client'
import { Button, DownloadTrigger } from '@chakra-ui/react'
import { LuDownload } from 'react-icons/lu'
const data = 'The quick brown fox jumps over the lazy dog'
export const DownloadTriggerBasic = () => {
return (
<DownloadTrigger
data={data}
fileName="sample.txt"
mimeType="text/plain"
asChild
>
<Button variant="outline">
<LuDownload /> Download txt
</Button>
</DownloadTrigger>
)
}
Promise
The data prop also accepts a function that returns a Promise. The promise
is resolved before the download starts, which is useful for downloading data
that is generated or fetched on demand.
'use client'
import { Button, DownloadTrigger } from '@chakra-ui/react'
import { LuDownload } from 'react-icons/lu'
const getData = async () => {
return JSON.stringify({ name: 'Saas UI', type: 'design-system' }, null, 2)
}
export const DownloadTriggerWithPromise = () => {
return (
<DownloadTrigger
data={getData}
fileName="data.json"
mimeType="application/json"
asChild
>
<Button variant="outline">
<LuDownload /> Download json
</Button>
</DownloadTrigger>
)
}
Props
| Prop | Default | Type |
|---|---|---|
data * | DownloadableData | (() => MaybePromise<DownloadableData>)The data to download. Accepts a string, Blob or File, or a function that returns one of these (optionally async). | |
fileName * | stringThe name of the file to download | |
mimeType * | FileMimeTypeThe MIME type of the data to download | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |