Present an empty state when there is an opportunity to provide explanation of an interface in absence of data. Empty states should orient the user, or communicate benefits of a feature. Use the following component to standardize empty state messaging display. Nevertheless, consider alternative experiences in situations where data is not available. For general error messages, use the error component instead.
Install the component dependency:
Include a React component in your project:
small | large
bookmark | channel | cloud | code | data | document | magnify | signal | video | zen
Default full page empty state
Layout scales from ‘large’ to ‘small’ based on container width. OR may be set as
Consider alternatives to empty states. Instead of an empty experience, might there be starter, educational, or sample content to present to users to help them learn about the product and start using it right away?
If the screen is intended to be populated with content by a user, consider suggesting samples or recommendations to ease the effort of getting started.
A single graphic and message may not be enough to convey the purpose of a feature. Consider animated or video walkthroughs, but keep them brief and dismissible.
If the absence of data occurs due to a user query such as a search, consider displaying a best match instead of nothing at all.
Follow voice and tone guidelines when writing copy for empty states. Appropriate empty statement consist of a short declarative statement of what occurred, followed by a brief sentence giving more context if necessary. Provide a clear CTA button that’s no more than 2-3 words. Write clearly and conversationally like you would if you were talking to someone. Try to use an active voice
If no illustration in the standard set is found to be suitable, you may officially aire your grievance, or... consider creating a custom illustration within the guidelines of the predefined style.