Related Pages: System Errors
...
Use an icon when multiple empty states are needed in different content areas on the same screen, or where space is limited.
...
Context dependent
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 an action is in progress.
...
...
...
Other use cases may require a dedicated ad-hoc illustration or icon, for example:
...
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 dwon
Usage & Behaviour
General guidelines
...
Replace the content that would ordinarily be shown.
Be centered horizontally within the content area.
For exampleFull page positioning:
...
Specific elements positioning:
...
Content
Empty states can apply be applied to various types of content , such as Data Tables, Lists, and Dashboards.(data tables, lists, dashboards, etc.)
Use a precise message that explains the current state.
The selection of the image depends on the specific context.
Where relevant, include direct links to related actions, such as clearing filters or adding new content.
For example:
...
Current variants
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. |
|
|
WaitingUse when an action is in progress. |
|
|
Specific use cases: | ||
Empty notificationsUse when a user has no new notifications to review. |
| |
Multiple/too many items selectedUse when a user has selected multiple or too many items |
| |
High request volume |
| |
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.
Best Practices
Use:
prompts Prompts to guide the user to perform relevant actions.
clearClear, concise written explanations.
Don’t:
leave Leave a completely blank content area for an empty state. This creates confusion for users.
use Use links to irrelevant actions.
...
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
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 notificationsUse when a user has no new notifications to review. | Multiple/too many items selectedUse 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. |  | Discuss with Asaf |
Code
...