Empty state

Introduction

Empty states occur when there is no data available to display. This can happen due to user actions, system conditions, or simply because no content has been created yet. Empty states help set expectations and guide users toward the next meaningful action.

Common examples include:

• No results found (e.g., after a search or filter)
• No content yet - prompt the user to create content
• No results found with an option to create new content
• No content (e.g., due to system or permission constraints)

These are only examples of empty states that can be used within your service. Depending on the use case, you are free to include a relevant icon or illustration, along with clear and helpful text, to explain the situation and encourage the appropriate next step (such as creating content, adjusting filters, or refreshing the page).

Well-designed empty states should be informative, friendly, and action-oriented, ensuring users understand why they are seeing the empty state and what they can do next.

Figma Resources

There are pre-designed components available in Figma to help you implement consistent Empty state in your designs: Empty state