Export

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 a download button

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.

Validate the edited name’s extension.

Example of a successfully created API key

Example of an export modal in its “Exporting” state

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

When a file can be exported in 2-5 different formats, these can be presented in a radio-button selection. Where possible, provide guidance about which format a user might want to choose, and pre-select a sensible default.

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

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

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

Adhere to Carbon’s modal guidelines.

Most often, the export modal is triggered by clicking an Export button.

The user navigates to the Export button using the Tab key. If Export is launched from an overflow menu, the user may navigate to Export within the overflow menu using the Up and Down arrow keys.
The focus state is applied to the button/menu item.
The user presses Enter to launch the Export modal.

When the modal opens, focus is set depending on whether sensible default choices are defined or not.

On opening the modal, the focus is applied to the first field that accepts user input.
On Tab, progress through any further fields that accept user input.
On Tab, apply focus to Export.
On Tab, apply focus to Cancel.

On opening the modal, set the focus to the Export button.
On Tab, apply focus to Cancel.
On Tab, apply focus to the first field that accepts user input. Follow accessibility guidance for the interaction type of this field (for example Radio button or Text input)
On Tab, progress through any further fields that accept user input.

Where passive modals are used to alert the user of success or failure, open the modal with focus applied to the close icon.

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Intuitive default name

Editable name

Optional extras

Specify the export or download location

Choosing export format

Errors and failures

Success notification

Accessibility

Trigger

Focus

If the user must complete fields before the export can be executed:

If a sensible default value is provided:

Success & Failure modals

Feedback