# File download

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FdhMHuSJYkrgtBlOEjPFk%2FFile%20Download%20Hero.png?alt=media&#x26;token=11fc0bbb-00b1-4ca7-9c88-1384f860b619" alt=""><figcaption></figcaption></figure>

## Overview

{% hint style="info" %}
This component allows users to **download** a file from the platform, not upload one.

To upload any document into the platform, refer to [`Upload Button`](https://design.mirakl.com/design/components/buttons#upload-button) a dedicated component to be used in a form.
{% endhint %}

This component has two mandatory fields:

* File name (specifying the file type). \
  If the file name is too long to fit into the given space, we automatically include an ellipsis but always display the file format.
* File icon

This component has a optional fields:

* File size\
  Specifying the file size is better because it provides users a useful information, aiding transparency from our side, download speed estimation, and data storage needed.

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F4CnI5mvzD7i9fif7n909%2FFile%20Download%20Examples.png?alt=media&#x26;token=41ed191b-e5ff-4cb7-851a-db7930611ea2" alt=""><figcaption></figcaption></figure>

Each component can contain only one file. \
If multiple files are available for download, you must overstack the component

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FCrHlVmEIuv2MQHdUrGOZ%2FFile%20Download%20Multiple.png?alt=media&#x26;token=34c443e3-fd0f-4cef-9829-b4fb765869bc" alt=""><figcaption></figcaption></figure>

## Key takeaways <a href="#id-8864e6" id="id-8864e6"></a>

{% hint style="success" %}

* Include file size if possible
* Use one component per file
  {% endhint %}

{% hint style="danger" %}

* Change the wording of the action (no "Download here")
  {% endhint %}