Use an empty state to educate users and guide them with positive and proactive next steps in any situation where there is no data or information to display.
- Icon/image (optional) - display associated object icons here. An icon is only recommended for full page empty states
- Title - provide a concise explanation
- Body - provide additional information that helps a user understand why the space is empty, what they can do to move forward, and the value or benefit that is gained by taking the next step
- Primary button - primary call to action
- Secondary buttons (optional) - alternative options for the user. There can be more than one secondary action.
There are several common use cases for empty states:
In a first-use situation, there is nothing to display because the user has not created or added anything yet. Use this opportunity to educate users about how to get started and introduce any associated value or benefit to taking action.
No data to show
Help users understand why there is no data to display and explain what they can do to move forward. For example, there may be no data to show because the user has a series of filters applied and the system cannot locate a match. It’s also possible there is no data because all issues are resolved or all tasks are complete.
Configuration is required
In this situation, a user may need to take steps to configure, connect, or enable something in order to view associated information or take advantage of features.
The user is not entitled or the user role does not have access
Help users understand why they are not able to view content and provide next steps.
A backend failure
Provide the user with information about the error that is easy to understand, and provide clear next steps they can take to resolve the issue.
Provide the users with information letting them know they’ve successfully completed a process. For example, you might provide a success state at the end of a tutorial or the completion of a wizard.