Empty state

Usage

Empty states are intermediate states on the user interface indicating that there is no data to show or that no data has been created yet. They should always communicate to the user why is there no data available for showing, and optionally include an action to do something about it. The illustrations used are open source and are from Undraw, they have been modified to fit the branding.

Best Practices

• Communicate the empty state reason clearly with appropriate use of visuals

• Center the empty state feedback according to the container where it is placed or page

• Optionally, provide actions or helpful copy to users to help see the data

Examples

No Data To Show Yet

This is shown when the application has no user-generated data to display; for example, when the user on boards the application for the first time. It can be placed centred inside the card container or centred directly on a page background.

No Results To Show

This is shown when the user-activated filter or search criteria on a table or list doesn’t yield any results.

Table or Graph Filtering

This is shown when the user-activated filter or search criteria on a graph doesn’t yield any results.

Table or Graph Filtering

This is shown in case there is any undefined error happened on the server side.