# Empty State

Empty states in views (tables, boards, charts, lists, etc.) occur when no records or rows match a view's filters or a user's permissions.

### What are Empty States?

Empty states appear in a view when:

* No records match the view filters, or filter fields
* No records match the user's permissions

Customizing these states is a great way to give your users context on what to expect when there are nor matching records, and to make your app feel more intuitive.

### Importance of Customizing Empty States

Custom empty states provide clarity to users, explaining why no data is present and what actions they can take. It’s an opportunity to:

* Guide users on next steps, such as creating a new record.
* Maintain engagement.
* Improve branding and tone of the app

<figure><img src="/files/rp9FcsAcx29oHgBXjuic" alt=""><figcaption><p>Empty state on a View</p></figcaption></figure>

### How to Customize a View Empty State

1. Navigate to the view, either a [List component](/components.md#supported-components) or a [view](/pages/views.md)
2. Open the **Empty State** settings in the configuration panel
3. Customize the Empty State **message** Explain why no records are shown, suggest an action they can take\_
4. Add an optional **image** Choose an image that aligns with your message and brand. We reccomend browsing something like\_ [undraw.co](https://undraw.co/illustrations)

{% @arcade/embed url="<https://app.arcade.software/share/2lRklBXRWbZTPcRXqZ18>" flowId="Qz28xM1ZAJIQJcvYkWHL" %}

### Hide a List Component if no Records Exists

If you're using a List component on a [Record Page](/data-to-app.md#row-record-page) or [Blank Page](/pages/blank-pages.md) you can hide the whole component if no records exist. This can be very helpful for tidying up the page, if there are no linked records to show.

**Note:** If records do show by default, but the user filters the List such that no records are displayed, the Empty State will be shown, the component won't be hidden.

<figure><img src="/files/CoxKgXcI0Z01U1FErTGk" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.noloco.io/pages/views/empty-state.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.