Empty

The Empty component is a visual indicator for a lack of content or data. It can be useful in scenarios like empty tables, lists, or search results.

The component provides a flexible design that allows users to specify icons, texts, buttons, and even replaceable components.

The component should usually cover the whole area of the section and have a slightly darker background than the regular content. It can be also used for large notification messages.

Types of empty states

• First use – Occurs with a new product or service when there is still nothing to show.
• User cleared – Occurs when users complete actions such as clearing their inbox or task list, and the result is an empty screen.
• Errors – These occur when something goes wrong, or when there are issues such as a mobile phone going offline due to network problems.
• No results/No data – Occurs when there is no content to display. This can happen when a search query returns no results or when no data is available for the selected filters (such as when filtering by a date range with no entries).

Related

• Button

Reference

• Breakfree Graphics Empty States – The Most Overlooked Aspect of UX
• justinmind Everything you need to know about empty state design