@wfp/react/src/components/Empty/README.mdx

WFP UI Kit

Empty states are a way to improve the user experience of your product, from onboarding to encouraging users to interact with your app. They are screens in your UI that are not yet full of information. That is to say, they will eventually have content on them when the user populates them.

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, such as a new Evernote or Dropbox account.
- **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).

### When to use

- ✓ Can be the case for a empty list table or search results
- ✓ Cover the whole area where normally content would be displayed
- ✓ Add personality by adding an illustration or icon (for example by using FontAwesome)
- ✓ Tell your user to do something: provide a call-to-action button
- ✓ Can be also used for large notification messages

### Related

[Button](?path=/docs/components-button--button-regular)

### Reference

[Breakfree Graphics Empty States – The Most Overlooked Aspect of UX](https://www.breakfreegraphics.com/design-blog/empty-states-the-most-overlooked-aspect-of-ux/)

[justinmind Everything you need to know about empty state design](https://www.justinmind.com/blog/everything-you-need-to-know-about-empty-state-design/)