Related Pages: System Errors
...
Context | Illustration | Icon |
No results foundUse when a search returns no results. |  |
|
No <items> definedUse when no items have been defined, such as an empty user list. |
|
|
No items selectedUse when a user has selected no items. |
|
|
Multiple/too many items selectedUse when a user has selected multiple or too many items |
|
|
WaitingUse when an action is in progress. |
|
|
Specific use cases: | ||
Empty notificationsUse when a user has no new notifications to review. |
|
|
High request volume |
| Need a fix?  |
Service is down |
|
|
Interaction
Empty state illustrations and messages are non-interactive.
See the relevant documentation for Dialog Button and Text Link interactions.
When an empty state is embedded within a container, the rest of the application should remain interactive.
Animations
jjj
ghghhWhen an illustration version is used for an empty state, it is optional to apply an animation to it.
See examples:
.gif placeholder | .gif placeholder | .gif placeholder | .gif placeholder |
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 |
|---|---|
Needs an update? |  |
Drafts:
...
Both icons and illustrations have several instances that correspond to common use cases of empty states
No results found
No <items> defined
No items selected
Waiting
Use when a search returns no results.
Use when no items have been defined, such as an empty user list.
Use when a user has selected no items.
Use when an action is in progress.
Empty notifications
Use when a user has no new notifications to review.
Multiple/too many items selected
Use when a user has selected multiple or too many items
High request volume
Service is down
Type
Usage
Illustration
Icon
No results found
Use when a search returns no results.
No <items> defined
Use when no items have been defined, such as an empty user list.
Empty notifications
Use when a user has no new notifications to review.
N/A
No items selected
Use when a user has selected no items.
Multiple items selected
Use when a user has selected multiple items.
TBD
Waiting
Use when an action is in progress.
Code
...