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.

In the interactive demo below, you can explore different configurations of empty states, including variations in layout, content, and actions. You can toggle the visibility of the title, description, buttons, and icon to see how they affect the overall design and user experience. The illustration can be changed to fit the context of your application, and the buttons can be customized to provide relevant actions for users.

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.

Best practices

• Use clear and concise messaging: The title and description should clearly explain the reason for the empty state and what users can do next. Best practices is to use both title and description. The title should be concise and attention-grabbing, while the description can provide more context and guidance.
• Provide actionable buttons: If applicable, include buttons that guide users toward the next steps. For example, if the empty state is due to a lack of content, you could include a button to create new content or refresh the page.
• Maintain consistency: Ensure that the design of empty states is consistent across your application to create a cohesive user experience.

Figma Resources

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