# Download Trigger

URL: https://ark-ui.com/docs/utilities/download-trigger
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/utilities/download-trigger.mdx

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.

**Example: basic**

```ripple
import { DownloadTrigger } from 'ark-ripple/download-trigger';
import { Download, File } from 'lucide-ripple';
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 component Basic() {
  <div class={styles.Root}>
    <div class={styles.Preview}>
      <File />
      <span class={styles.PreviewText}>{content}</span>
    </div>
    <DownloadTrigger class={button.Root} data={content} fileName="hello.txt" mimeType="text/plain">
      <Download />
      {' Download txt'}
    </DownloadTrigger>
  </div>
}

```

### Download SVG

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

**Example: svg**

```ripple
import { DownloadTrigger } from 'ark-ripple/download-trigger';
import { Download, File } from 'lucide-ripple';
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 component Svg() {
  <div class={styles.Root}>
    <div class={styles.Preview}>
      <File />
      <span class={styles.PreviewText}>{'circle.svg'}</span>
    </div>
    <DownloadTrigger
      class={button.Root}
      data={svgContent}
      fileName="circle.svg"
      mimeType="image/svg+xml"
    >
      <Download />
      {' Download SVG'}
    </DownloadTrigger>
  </div>
}

```

### Promise

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

**Example: with-promise**

```ripple
import { DownloadTrigger } from 'ark-ripple/download-trigger';
import { Download, Image } from 'lucide-ripple';
import button from 'styles/button.module.css';
import styles from 'styles/download-trigger.module.css';

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

export component WithPromise() {
  <div class={styles.Root}>
    <div class={styles.Preview}>
      <Image />
      <span class={styles.PreviewText}>{'random-image.jpg (fetched on download)'}</span>
    </div>
    <DownloadTrigger
      class={button.Root}
      data={fetchImage}
      fileName="random-image.jpg"
      mimeType="image/jpeg"
    >
      <Download />
      {' Download Image'}
    </DownloadTrigger>
  </div>
}

```

## API Reference

**Component API Reference**

**DownloadTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `data` | `DownloadableData | (() => MaybePromise<DownloadableData>)` | Yes | The data to download |
| `fileName` | `string` | Yes | The name of the file to download |
| `mimeType` | `FileMimeType` | Yes | The MIME type of the data to download |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |