EmptyState
Indicates when there’s no data to show, like when a search has no results.
Sometimes users will perform an action and expect to see something, but you have nothing to show them. This happens when a search has no results, when they haven’t entered data yet, and other similar cases. Help them get out of this situation by providing guidance in an empty state.
Remember that an empty state is not a desired outcome, so try to encourage users to continue with helpful language and a positive illustration. Guide them to the next step to take to get to their desired goal.
Component status





Content structure

Guidelines
Guide users out
Empty states can feel nicer when they have illustrations and friendly messages. But don’t forget that they’re not an end goal in themselves.
Help users get out of an empty state into a place they can actually do something. Highlight the actions a user can take to move forward in their desired path.
Focus on simple actions to take to achieve a goal.
Use humor carefully
Empty states can be stressful for users because they want to get something done and can’t. Maybe they want to find a connection, book a trip, or start a new project, but all they have is an empty state.
While humor can lighten the mood, remember that we keep our tone more serious in stressful situations. Especially stay away from anything that might look like blaming the user for the empty state or making it seem impossible to get out of.
Make nonvisual info clear
Illustrations in empty states are just for decoration. This means they don’t need to have alternative text embedded in the image.
Instead, focus on making the title and any other text clear on their own so the message of how to get out of the empty state is accessible to everyone.
Related components
Illustration
See how to use illustrations on their own.