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.




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.

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

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.


Item |
Size |
Placement |
---|---|---|
1 |
Large |
In larger spaces that take up most of the screen surface and are the primary content on the page: |
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. |
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 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.

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

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

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

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.

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

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.

- 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.