# 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**

#### React

```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'

export const Basic = () => {
  return (
    <DownloadTrigger data="Hello world" fileName="hello.txt" mimeType="text/plain">
      Download txt
    </DownloadTrigger>
  )
}

```

#### Solid

```tsx
import { DownloadTrigger } from '@ark-ui/solid/download-trigger'

export const Basic = () => {
  return (
    <DownloadTrigger data="Hello world" fileName="hello.txt" mimeType="text/plain">
      Download txt
    </DownloadTrigger>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DownloadTrigger } from '@ark-ui/vue/download-trigger'
</script>

<template>
  <DownloadTrigger data="Hello world" fileName="hello.txt" mimeType="text/plain">Download txt</DownloadTrigger>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DownloadTrigger } from '@ark-ui/svelte/download-trigger'
</script>

<DownloadTrigger data="Hello world" fileName="hello.txt" mimeType="text/plain">Download txt</DownloadTrigger>

```

### Download SVG

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

**Example: svg**

#### React

```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'

export const Svg = () => {
  return (
    <DownloadTrigger
      data='<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>'
      fileName="circle.svg"
      mimeType="image/svg+xml"
    >
      Download SVG
    </DownloadTrigger>
  )
}

```

#### Solid

```tsx
import { DownloadTrigger } from '@ark-ui/solid/download-trigger'

export const Svg = () => {
  return (
    <DownloadTrigger
      data='<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>'
      fileName="circle.svg"
      mimeType="image/svg+xml"
    >
      Download SVG
    </DownloadTrigger>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DownloadTrigger } from '@ark-ui/vue/download-trigger'
</script>

<template>
  <DownloadTrigger
    data='<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>'
    fileName="circle.svg"
    mimeType="image/svg+xml"
  >
    Download SVG
  </DownloadTrigger>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DownloadTrigger } from '@ark-ui/svelte/download-trigger'
</script>

<DownloadTrigger
  data={`<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>`}
  fileName="circle.svg"
  mimeType="image/svg+xml"
>
  Download SVG
</DownloadTrigger>

```

### Promise

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

**Example: with-promise**

#### React

```tsx
import { DownloadTrigger } from '@ark-ui/react/download-trigger'

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

  return (
    <DownloadTrigger data={fetchImage} fileName="random-image.jpg" mimeType="image/jpeg">
      Download Image
    </DownloadTrigger>
  )
}

```

#### Solid

```tsx
import { DownloadTrigger } from '@ark-ui/solid/download-trigger'

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

  return (
    <DownloadTrigger data={fetchImage} fileName="random-image.jpg" mimeType="image/jpeg">
      Download Image
    </DownloadTrigger>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DownloadTrigger } from '@ark-ui/vue/download-trigger'

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

<template>
  <DownloadTrigger :data="fetchImage" fileName="random-image.jpg" mimeType="image/jpeg">Download Image</DownloadTrigger>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DownloadTrigger } from '@ark-ui/svelte/download-trigger'

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

<DownloadTrigger data={fetchImage} fileName="random-image.jpg" mimeType="image/jpeg">Download Image</DownloadTrigger>

```

## API Reference

**Component API Reference**

#### React

**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. |


#### Solid

**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` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**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. |


#### Svelte

**DownloadTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `data` | `DownloadableData | (() => MaybePromise<DownloadableData>)` | Yes |  |
| `fileName` | `string` | Yes |  |
| `mimeType` | `FileMimeType` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |