Related Pages: System Errors

...

Empty states are special messages shown in workspaces or containers to indicate that content is unavailable.

...

Types

Illustration	Icon
Use for a single empty state with sufficient space for displaying the illustration. All illustrations are animated.	Image Removed	Icon Use an icon when multiple empty states are needed in different content areas in the same workspace, or where space is limited.
Image Added	Image Modified

Usage & Behaviour

...

The selection of the image depends on the specific context:

Context	Illustration	Icon
No results found Use when a search returns no results.
No <item type> defined Use when no items have been defined, such as an empty user list.
No <item type> selected Use when a user has selected no items.
Multiple/too many <item type> selected Use when a user has selected too many items
Waiting Use when an action is in progress Illustration is in place in addition to any used instead of other progress indicator indicators [link,link] if exists. No icon - put a progress bar (indeterminant) Move this line to progress indicator put here a link to “see also…progress indicators”		put a spinner
Specific use cases:
Empty notifications in-tray Use when a user has no new notifications items to review.
High request volume move to errors		Need a fix?
Service is down move to errors

Interaction

• Empty state illustrations and messages icons are non-interactive.

• See the relevant documentation for The message may contain an additional Dialog Button and or a Text Link interactions.

• When an empty state is embedded within a container, the rest of the application should remain interactive.

Animations

• When an illustration version is used for an empty state, it is optional to apply an animation to it.

See examples:

• active.

Transitions

• Appears:

  • After a component or section finishes loading, and there is no data to show (for reasons stated above).

  • When a specific user action hasn't been taken yet (for example, no items added/selected).

• Disappears:

  • Either because of a user action (populates the state with content) or a process that changes the state (e.g. server is responsive again).

...

Zeplin link	Screen thumbnail
https://zpl.io/llvJmwX Needs an update?

Code

...

Drafts:

Empty states are elements, containing a visual and a corresponding text, that are used where there is no content to display

...