iOS
Android
Empty states
Last updated June 18, 2020

Empty states inform users that there is no content on a page. They prevent users from waiting indefinitely for content to appear on the page.

Usage

Visual Design

Phone view

We center all the content horizontally on the page. Note that the button is optional. On Phone landscape (further below), we do not display an image due to the reduced height.

Tablet view

The tablet spec is similar to phone. In the full width view, portrait and landscape design are identical. In a split pane view (further below), the empty state on the left pane is identical to phone. On the right pane we use simple text. Please view phone specs for dark theme colors.

Edge cases

Common scenarios

Accessibility

Talkback

Dynamic Text

Future Updates

  • Add a variation for empty states as a section within pages (as opposed to full screen).