Related Pages: System Errors
...
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
ghghh
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:
...
Context dependent
Both icons and illustrations have several instances that correspond to common use cases of empty states
...
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. |  | Discuss with Asaf |
Code
...