Export pattern

When exporting something you have the ability to change the format of the object or resource you are exporting out external to the system. Downloading transfers a resource from a remote system to a local system without changing its format.

Status:

Experimental

Maintainers:

Example of an export modal in context

Example of an export modal

Example of a download modal in context

Example of a download modal in the context of a product

Intuitive default name

When a resource is given an intuitive name by default and there is no choice of an export or download location, the export occurs on the click of the Export button and nothing additional is displayed.

Example of an export button on a data table
Example of a download button

Example of a download button

Editable name

When a file’s name can be edited before exporting or downloading, a dialog containing an editable textbox should be presented to the user. The textbox should be pre-populated with the file’s default name.

When downloading, the file extension is not displayed.

Example of an export modal Example of validation errors

Validate the edited name's extension.

Example of an export modal in its "Exporting" state

Example of an export modal in its "Exporting" state

Optional extras

Specify the export or download location

When specifying the download location of a resource, clicking the primary “download” button activates the browser’s default location panel. The file is downloaded once a location is selected and the user clicks Save.

Example of specifying an export location

Passive success modal

You can choose to show a passive modal when an export has succeeded.

Example of a passive success modal

Errors and failures

In the event of an error, display the error in the modal.

Example of an error state modal

Success notification

A notification can be used to alert the user that an export has been successful.

Example of a success notification