Overview

Empty state

Empty states indicate that there's no content, data, results, or history available to be displayed. They can be used to instruct users on how to find, create, or add content to the screen, or to try an action again. They can also be used to direct users towards call to actions.

Empty state

Usage

When to use
Empty states appear when an action has returned no results, or when there's no history or data to be displayed. Use the space to communicate the status of the system, guide the users to the next steps, and when relevant, help them discover and learn new features.
Full-screen empty state
Use a full-screen empty state to convey that there's nothing to display for the entire page.
Sectional empty state
Use a sectional empty state when only a section of the page is empty.
How best to use
Do
Pair an appropriate visual that best aligns with the use case, such as a magnifying glass for search.
Don't
When selecting visuals, bear in mind the level of empathy needed for the scenario. For example, try not to use overly-celebratory visuals for negative empty states such as errors.
Do
Always try to offer next steps to help guide users out of this state.
When not to use
In empty states, although there's nothing displayed, the system is working correctly. Therefore, it should not be used for an error scenario where the system is not performing or giving an unexpected result.