Patterns Offline states

Offline states

Offline states allow users without internet access to use apps.

Principles Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Adapt to the connection

Consider how your feature or app behaves when the user has a slow, intermittent, or lack of internet connection.

Illustrate functionality

Use an element’s design to illustrate how an offline feature works.

Display available content

It’s better to load something than nothing, while explaining that the internet connection is limited.

States and settings Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Your app should indicate whether it’s offline or online, particularly if it has some features that are available offline, and some that aren’t.

It should also provide a place to manage offline files, if applicable.

Functionality while offline


To communicate that an action works offline, display the offline pin icon with the text label “Offline.”

An offline icon is displayed when the user performs an action offline.

An offline icon is displayed next to the URL when a website is accessed offline.

No functionality while offline


When offline, features that aren’t available should be indicated with the “cloud off” icon. Only show this icon when the product is offline. When possible, use the text label “No internet” with the icon.

Offline status is indicated along with helpful tips of what the user can do while offline.

While connected to the internet, a download action is offered for future offline use.

Offline places

Provide a place for users to manage their offline settings. Mark this destination with the offline pin icon, if applicable.

Offline areas are available in this navigation menu.

Offline interactions Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Downloading a file

Offline functionality gives users access to files they’ve previously downloaded, such as videos and websites. To access them offline, users must download files onto their devices when they have an internet connection.

To indicate a file can be downloaded, display both the download icon and the word “download.” Include the file size to help users decide if it’s too large.

When offline, allow users to select files to be downloaded when connected to the internet.

Do.

Pair the download icon with the word “Download.”

Don’t.

Don’t use a toggle control for downloading a single file. Toggles indicate whether a state is “on” or “off,” rather than a one-time download.

Iconography

After a file has been downloaded, indicate that it’s available offline by displaying the offline pin icon.

The download and offline pin icons are available in the Material icon library.

Animation

To indicate that downloaded items can be accessed offline, show an animation of the download icon transforming into an offline pin icon. See Progress and activity for guidelines.

A progress indicator transitions between the two icons.

Removing downloaded content

To make space, users may delete files on their devices. Your app should allow users to delete any downloaded files.

Display a remove action with a delete icon for downloaded files.

Show how much space will be saved by removing a file.