Empty state

The problem it solves

Every list, dashboard and inbox is empty at some point: before the first item is created, when a search finds nothing, when everything has been cleared, or when content failed to load. A blank area in these moments tells people nothing. They cannot tell whether the screen is broken, still loading or simply empty, and they do not know what to do next. An empty state explains why the screen is empty and offers the next step.

When to use it

• First use: a new account or project has no content yet.
• No results: a search or a filter matches nothing.
• Cleared: the person finished everything, such as an empty inbox or a completed task list.
• Unavailable: content could not be loaded, or the person has no access to it.

Each of these needs different words and a different next step, so design them separately.

When not to use it

• Do not show an empty state while content is still loading. Show a loading indicator until the request has finished, then the empty state if nothing came back.
• Do not fill an empty screen with decoration alone. An illustration without an explanation and an action is still a dead end.
• Do not show fake sample content without saying it is a sample.

How to build it

The message

Say what is empty and why, in plain words: "No invoices yet", "No results for 'blue sofa'". Then say what the person can do: create the first item, change the filters, check the spelling, or try again. Put the main action as a button right in the empty state.

Per case

• First use: explain what the screen will hold and offer to create the first item or import data. Sample data, clearly labelled, can show what a full screen looks like.
• No results: repeat the query, show the active filters with a way to clear them, and suggest related searches.
• Cleared: confirm the person is done. This is a good moment, so keep it short.
• Unavailable: say what failed and offer a retry, or say who can grant access.

Accessibility

When the empty state replaces content without a page load, announce it through a live region so screen reader users hear that there are no results.