The Empty Placeholder is a placeholder to represent a situation where the content of a particular component is empty.

![](https://user-images.githubusercontent.com/6418684/68661600-81604200-053b-11ea-94e7-3141d7349ed8.png)

You can use it, for example, in lists of elements or in tables, to fill the space when there are no elements to display, or in scenarios where data to be displayed is temporarily empty due to the behaviour of a specific feature (e.g., search, when no results are available).

The reasons to use an Empty Placeholder are:

- To make the user aware of the fact that there is no data due to a specific reason, and not because the app is misbehaving.
- To explain why no data is displayed and to guide the user towards the flow that causes data changes (e.g., in case of a list, to help the user create the first element).

# Empty Placeholder Elements

## Graphic

Use a graphic to make the user interface more enjoyable and to help the user in understanding the message displayed by the component. The graphic should always be consistent with the text displayed below.
For example, you could use an icon, such as the empty container icon (e.g., in case of an empty list), or the icon that represents the action related to the data (e.g., a search icon, in case we are displaying search results).

![](https://user-images.githubusercontent.com/6418684/68662186-a1443580-053c-11ea-9b70-dd11a54da1fb.png)

![](https://user-images.githubusercontent.com/6418684/68662188-a2756280-053c-11ea-8bf5-cfe4f0fcc185.png)

## Primary Text

Use the Primary Text to explain the reason why there is no data to display and to help the user start with the flow that would allow them to reach their goal. Use a clear language and be specific and concise.

![](https://user-images.githubusercontent.com/6418684/68664809-3a754b00-0541-11ea-99ea-e6f75822a8f4.png)

![](https://user-images.githubusercontent.com/6418684/68664819-3d703b80-0541-11ea-8907-6d2d7bb7b51a.png)

## Secondary Text

The Secondary Text is optional, and you can use it to:

- Give the user additional information useful to guide them into starting with the flow.
- Better explain the underlying functionality.

The Secondary Text should not repeat what the Primary Text already states: do not use it if it is not necessary.

![](https://user-images.githubusercontent.com/6418684/68665069-b079b200-0541-11ea-94ad-4d6823bd56e7.png)

![](https://user-images.githubusercontent.com/6418684/68665072-b1aadf00-0541-11ea-9b49-a25497bae38a.png)

## Action

If you want to help the user start with the underlying flow, it is a good idea to add a Call to Action that allows them to do it.
The label of the CTA must be consistent with other labels of the application that allow starting with the same flow.

![](https://user-images.githubusercontent.com/6418684/68665251-fdf61f00-0541-11ea-83be-e76a8b851b9d.png)

# Examples

![](https://user-images.githubusercontent.com/6418684/68665254-ff274c00-0541-11ea-8293-09e6091d6e86.png)

![](https://user-images.githubusercontent.com/6418684/68665255-ffbfe280-0541-11ea-98c7-7b7d49f95cc5.png)
