Empty State

An Empty State is used when no data is available for display.

Guidelines

When to use

  • No initial data: When a feature is used for the first time, and is not populated with data yet.
  • No matching results: When there are no match results after the user performs a search or applies filters.
  • Cleared data: When the user intentionally clears data from the interface e.g., dismissing all notifications or completing assigned tasks.
  • Error feedback: When there is a problem within the system, and data cannot be shown, e.g., the back-end database cannot be reached.

Types

An Empty State can result from different situations, and each requires a good understanding of the context and user needs in order to provide the best help possible. We identified four main scenarios when an Empty State should be used and described their purpose.

Empty State / Usage / Variants / No data
Empty State / Usage / Variants / User cleared
Empty State / Usage / Variants / Error
Empty State / Usage / Variants / First use

Item

Type

Description

Messages Purpose

1

No initial data

Occurs when a feature is used for the first time and is not populated with data yet.

Users should understand what data they can expect once it is available and the benefit of adding it. Provide clear action steps to add the data.

2

No matching result

Occurs when the user performs a search or uses filters and no data matches their criteria.

Explain how to adjust the criteria and offer additional help resources.

3

Cleared data

This state is achieved when the user performs actions that clear data from the interface, e.g., dismissing all notifications or completing assigned tasks.

Reassure the user that they have successfully performed all the required actions.

4

Error feedback

Use when there is a problem within the system, and data cannot be shown, e.g., the back-end database cannot be reached, or the third-party solution connection is broken.

As this disrupts the user’s flow, it’s important to explain the problem and offer corrective actions.

 

Action Slot

Including actions in the Empty State can guide the user towards the most logical next-step action, offer additional resources, or help them solve the issue causing an error.
You can include up to 2 actions in the designated slot area. Depending on the context and the importance of the action, you can choose between Primary or Secondary Buttons and Standalone Links.

Do

Empty State's action should fit the hierarchy of all the actions on the page.

Don't

Empty State's action should not be in conflict with other actions on the page, and should not use primary action if there is already one.

 

Size and placement

The Empty State can appear in any space in the layout that otherwise displays data, including but not limited to full pages, dashboards, Tables, Side panels, and Search inputs.

The Empty State comes in two sizes, each designated for specific spaces within the interface.

Empty State / Usage / Size / Large
Empty State / Usage / Size / Medium

Item

Size

Placement

1

Large

In larger spaces that take up most of the screen surface and are the primary content on the page:
- Full page
- Dashboards/reports
- Tables
- Side Panel

2

Medium

In smaller spaces and components nested within larger ones. When there's enough space to include both a pictogram and content without overwhelming the UI.

- Main navigation’s search results
- Sections within the Side Panel
- Nested Cards

 

Using text to represent an Empty State

When space is limited or multiple empty states would show at the same time, consider using text only to indicate the empty state. We recommend using the Body Small text style in Figma and the equivalent typography component in code.

Examples of using text instead of the component

Examples of when it’s best to use text instead of the Empty State component are cards within the dashboard and search results inside a dropdown list.

 

Best practices

  • Don’t overwhelm the user with Pictograms: When multiple Empty States can appear on the same page, don’t use more than one variant with a Pictogram.
Do

When you expect more Empty States to appear on one page, use text to represent them, avoiding overloading the interface with Pictograms.

Don't

Don't use Medium or Large variants when you expect more Empty States to appear on one page. This results in an overwhelming design.

  • Choose the right Pictogram: It's important to align the Pictogram’s concept as closely as possible with the situation’s context. For information, go to Pictogram
Do

Use Pictogram that matches the situation and uses the correct semantic colors.

Don't

Don't use semantic error Pictograms for empty states that are not caused by an error. Use generic or information ones instead.

  • Provide meaningful content: To ensure a positive user experience, each Empty State should inform the user why the data is unavailable and what can be done to resolve it. Avoid generic statement messages.
Do

Provide purposeful message that will allow user to solve the problem/move forward.

Don't

Avoid generic, system-like messages that don't help the user.

  • Design empty states thoughtfully: When we forget to design for edge cases, it often results in a poor experience for our users. Thinking about Empty States during the design process allows us to use their potential to turn negative moments into productive ones.

Behavior

Mouse Interactions

The Empty State doesn’t have interactive elements unless it contains actions.

Usage / Behaviour / Mouse Interactions
  1. Clicking on the Action (Button or Link) will trigger an action.

 

Keyboard interactions

Key

Interaction

Tab

Sets focus on the action

Enter

Activates the action


Content

There are several cases when a user might come across an empty state. Each of those cases, require a different content solution to give the most benefit to the user.

Tone

Maintain an informative tone when presenting an empty state to users. Use an actionable tone when there is a clear action the user can take.

No initial data

The first time a user visits a screen where there is nothing there yet, tell the user what they can do next to get started. Help the user understand what they can do on that page, and how to navigate it. Avoid exclusively telling them that there is nothing there, favor showing them what their first action could be.

No matching results

When there is no result available, suggest an alternative when possible. If there is no alternative to suggest, simply tell the user to change their request and try again.

Cleared data

When a user completes or clears everything on a page, there may be nothing left to show them. This is a good time to congratulate them for finishing their tasks. In the case that it’s in the user’s interest to add or create more on that page, guide them to the next action that they can take.

Error feedback

In some cases, an empty state is shown because there is nothing left for the user to do, and nothing they can do next. In most cases, this would result in an error message where we should tell the user to refresh the page or tell them who to contact for help. In the case when there is absolutely nothing to do, simply tell them that. For more information, go to Errors.