Empty State
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.
Component Variants
Design Principles
- 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.