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 nothing to show. This can happen if someone performs a search and the query is empty or there isn’t data available to show (when filtering for a date-range that has no data for example).

Related

• Button

Reference

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