Empty state

Skip to page content

BETA

Component demo

Interactive example

Hmm...there's nothing here

We don't currently have any favourite teas, probably because coffee is much better.

Take a look at our favourite coffees instead, there's much more of those.

Customer support

When to use

Use an empty state component to communicate to people that no content is available to display. Use them to engage people and guide them on what is best to do next by including a button or a link to the next best action.

Empty states are used for many different reasons such as:

No content yet exists due to the first-time use of the functionality.
Data was not successfully loaded.
A query or search term yielded no results.
Data was removed resulting in nothing remaining to display.

Use empty states when no data can be displayed in a component’s contents. For example, show an empty state when no data is available to display in a data table, or if a search term didn’t find any results.

An example app called ‘We love coffee’ with a page displaying favourite teas. An empty data table is displayed with an empty state that reads ‘There’s nothing here’.

Use empty states when there is no data available to display.

Use empty states to highlight access issues. If a user does not have access to some content, use an empty state to provide this messaging as well as a means of continuing.

An example app showing favourite coffees. The ‘americano’ product is selected, but show’s a ‘locked’ status on it. A drawer is displayed containing an empty state component that reads ‘Sorry, you don’t have access to this at the moment’.

Use empty states to show access rights issue if the content is not available to that user.

Empty states are not always due to errors, so use positive messaging as well. For example, in a to-do list app, all items might have been cleared and so the empty state message may be celebratory.

An example app that shows new orders for coffee that need to be fulfilled. After the orders have been completed, an empty state component is displayed showing a positive message that reads ‘All done! Have a cuppa’.

Use empty states for positive messaging when empty is the desirable state, such as in a ticketing system or to-do list.

Use empty states as starting points for processes that require people to add input into an app. For example, a calendar entry may have no events yet, so use an empty state to prompt for an event to be added.

An example app showing a product customisation page for an Americano coffee. A section appears titled ‘Extras’ and an empty state message is displayed prompting the user to ‘add extras’.

Use the empty state component as a starting point for a process, such as adding extras to a product customisation.

When not to use

Avoid using custom components instead of empty states. The empty state component creates an easily understandable, consistent method of indicating that no data is available and therefore what to do next.

Don’t use empty states to communicate other messages to people that are not related to something being empty, use alerts or toasts instead. Only use empty states in situations where no data is present to display.

Don’t use empty states to convey messages that are not related to an empty state.

Don’t use empty states to show error messages that could otherwise be displayed using other form validation patterns. Only use empty states to show errors relating to data not being loaded successfully.

Don’t use empty states to indicate something is loading, instead use a loading indicator .

An empty state component being used to indicate that an order history is loading.

Don’t use empty state components for loading messages.

Sizing

Embed empty states in components that would otherwise show data. For example, use them in containers, cards, dialogs or data tables.

Use an empty state on a full screen in case something couldn’t be loaded, or there is no content available yet. For example, use an empty state to show a 404 message.

An empty state component displayed on a full screen that reads ‘There’s nothing here.’

Use empty states on full screen page if no data is available to display.

An example app with a side panel displayed over the page content containing an empty state component that reads ‘No comments yet’.

Use empty states in other containers such as drawers and side panels.

A grid of cards for coffee products with one card showing an empty state component that reads ‘Woops, this coffee cup is empty’.

Use empty states within other components and containers when no data is present.

Layout and placement

Set the alignment of the empty state to match the component or container it sits in.

Place empty states at the top and don’t resize the container, keep it sized the same as if the primary content was displayed instead.

Content

Use the empty state to clearly communicate to someone what has happened, why they are seeing the empty state and what to do next.

A diagram showing the different elements that make up the empty state component. These are an image or icon, a title, a subtitle, some body text, and an interaction area.

The empty state component has an image or icon, a title, a subtitle, some body text and an interaction area.

Add an illustration, image or icon to an empty state to provide additional recognition or reinforce the written message.

Use the empty state heading to clearly indicate the state of the empty content.

Use the subheading to add more detail and explain why this may have happened.

Use the body to explain how to rectify the issue, or to explain what is best to do next.

Use the interaction area to include actions and links that will help people to continue through the app. Always include either a primary button or a navigation link, and occasionally include a secondary button or link if other routes are possible.

However, avoid placing too many actions in the interaction area as this will cause confusion about what to do next.

An empty state component that has three buttons and three links within its interaction area.

Avoid placing too many actions within the interaction area.

Don’t place other interactive components, such as inputs, in an empty state’s interaction area. If input needs to be collected, then do this on a full page or on a dialog.

Accessibility considerations

If an empty state is displayed as a result of a change on a page, make sure it is announced by a screen reader using a live region.

Alert .
Loading indicator .

Last reviewed 31 August 2023 .