# Download Trigger

URL: https://ark-ui.com/docs/utilities/download-trigger
LLM: https://ark-ui.com/llms.txt/utilities/download-trigger

Trigger file downloads programmatically.

---

## Motivation

The `DownloadTrigger` component provides a convenient way to programmatically trigger file downloads in web
applications. It handles the complexities of downloading files, whether they are URLs, Blobs, or other data types.

## Examples

### Basic

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

```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'
import { DownloadIcon, FileIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/download-trigger.module.css'

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

export const Basic = () => {
  return (
    <div className={styles.Root}>
      <div className={styles.Preview}>
        <FileIcon />
        <span className={styles.PreviewText}>{content}</span>
      </div>
      <DownloadTrigger className={button.Root} data={content} fileName="hello.txt" mimeType="text/plain">
        <DownloadIcon /> Download txt
      </DownloadTrigger>
    </div>
  )
}
```

### Download SVG

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

```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'
import { DownloadIcon, FileIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/download-trigger.module.css'

const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>`

export const Svg = () => {
  return (
    <div className={styles.Root}>
      <div className={styles.Preview}>
        <FileIcon />
        <span className={styles.PreviewText}>circle.svg</span>
      </div>
      <DownloadTrigger className={button.Root} data={svgContent} fileName="circle.svg" mimeType="image/svg+xml">
        <DownloadIcon /> Download SVG
      </DownloadTrigger>
    </div>
  )
}
```

### Promise

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

```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'
import { DownloadIcon, ImageIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/download-trigger.module.css'

export const WithPromise = () => {
  const fetchImage = async () => {
    const response = await fetch('https://picsum.photos/200/300')
    return response.blob()
  }

  return (
    <div className={styles.Root}>
      <div className={styles.Preview}>
        <ImageIcon />
        <span className={styles.PreviewText}>random-image.jpg (fetched on download)</span>
      </div>
      <DownloadTrigger className={button.Root} data={fetchImage} fileName="random-image.jpg" mimeType="image/jpeg">
        <DownloadIcon /> Download Image
      </DownloadTrigger>
    </div>
  )
}
```

## API Reference

### DownloadTrigger

#### Props

**`data`**
Type: `DownloadableData | (() => MaybePromise<DownloadableData>)`
Required: true
Default Value: `undefined`
Description: The data to download

**`fileName`**
Type: `string`
Required: true
Default Value: `undefined`
Description: The name of the file to download

**`mimeType`**
Type: `FileMimeType`
Required: true
Default Value: `undefined`
Description: The MIME type of the data to download

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.