Skip to content
Paste
UX Platform
Change the site theme
GitHub

Data Export

The Data Export pattern provides a way for the user to extract data from their account.

Code ready:
Code done
Design assets:
Design assets done
Documentation:
Documentation done
Peer review:
Peer review done
Status
Production
Products
Console
Flex
SendGrid

Ingredients#

Button

// import all ingredients for the Data export pattern
import {​ Button } from "@twilio-paste/core/button";
import { ExportIcon } from "@twilio-paste/icons/esm/ExportIcon";
import { Menu } from "@twilio-paste/core/menu";
import { Tooltip } from "@twilio-paste/core/tooltip";
import { Anchor } from "@twilio-paste/core/anchor";
import { Toast } from "@twilio-paste/core/toast";

Usage#

General#

The Data export pattern enables customers to extract all or selected data from a data table or graph. Data is usually placed into a CSV, PNG, PDF, or JSON file. In general, data exports are generated by the server in Twilio products (particularly CSVs in Voice & Video, SIP trunking, and Messaging).

Exporting should:

  • Be triggered by a Button (or Button as Anchor) or Menu item. The Button or Menu item should clearly state what type of file will be exported. E.g. “Export CSV”.
  • Tell the customer if there are any limitations to the data that can be exported. Use a Tooltip to communicate this information.

Using the word “Export” and the ExportIcon are predictable signals to customers that they can extract data from Twilio.

Twilio products generally enable customers to convert files to a range of formats before downloading and saving. However if you can’t provide a format conversion, you should still use the word “Export” and the ExportIcon.

The delayed export is an exception to this copy guideline and uses the word “Download” and the DownloadIcon instead.

Variations#

Immediate export#

An immediate export happens when a customer can download their export on the same page where they clicked the export Button or Menu item.

When using a Button, while an export is in progress, show the Button loading state. When it’s in a loading state, it will disable by default.

Most often, selecting the export Button or Menu item should trigger a “save as” dialog in the browser. Customers will be able to track the export’s download status through their browser.

However in cases where you might offer more customization of the data, you can trigger a Modal first. In the Modal, customers can select what columns to export, additional file formats, etc.

Delayed export#

A delayed export happens when a customer needs to wait for data to be ready. Use the same components as the immediate export pattern, but make sure to:

  1. Confirm the export was initiated by using a Toast component. Inform the customer that they’ll receive an email notification when it’s ready.
  1. Send an email notification to the customer when the export is ready, with a link to or attachment of the file(s). In this second step, use the word “Download” (example: “Download CSV”) to trigger the actual file download since the customer already clicked an export action to start the export process.

Active Exports

StatusExport nameActions

Ready for download

Tuesday, June 1, 2021

Contacts who did not click

Ready for download

Tuesday, February 2, 2021

All contacts

Positioning the export action#

Place the export Button above and right-aligned to the data it’s exporting, usually a data table or graph.

90s Music

ArtistTitleYear
BlackstreetNo Diggity1996
OasisWonderwall1995
Daft PunkAround the World1997

It can also be placed in a card component that shows the specific data that will be exported, such as a billing invoice.

August 2021 usage

Balance: -$10,512.02

Starter kits#

Black lives matter.