Last Updated on Sep 29, 2022
An empty state is shown when a container has no items or data to show. This can happen due to an error, lack of results, or because of user action. They provide helpful feedback to inform the user about the lack of content.
- Empty states are used when content is missing and you need to communicate why. If a user is starting a new workflow and hasn’t created any content yet, add an empty state to help orient them.
- They’re used if a user has nothing more to do. For example, if they have completed all tasks, read all messages, seen all notifications, etc.
- For most scenarios use the regular size variant. Use the jumbo size for full page empty states. Like a 404 or other error pages.
- Headings should be a sentence fragment and use title case. Optionally, add a description to describe what happened or what the user can do to exit this state.
- Optionally, add a button to perform an action. The button variant can be changed based on context.
- In most cases, the icon’s background should remain neutral. The icon can be changed to better represent what data could not be loaded.
Do's and Don'ts
Anticipate all scenarios that could create an empty state in your designs. Include these options when handing off to development.
Write copy with an educational tone the first time the user views a blank slate.
Don’t include more than one button.
Don’t include more copy than is necessary. Keep descriptions short.
Table of ContentsComponent VariantsDesign PrinciplesDo's and Don'ts