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 matching 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 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 benefits 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, explaining the problem and offering corrective actions is important. |
Properties
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 simultaneously, 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.
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.
- Always provide written content: The Empty State has an informational purpose and should not rely solely on the visual asset. Therefore, the Title is mandatory and should never be left empty.
Always provide written content to give user a proper guidance.
Empty State should never be used with just a Pictogram.
- 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, our users often experience a poor experience. 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
General principles
Explain what’s going on
Make it clear why the screen is empty. Is this a first-time view? A filter with no results? A cleared-out list?
✅ You haven’t added any properties yet
🚫 No data
Guide the user forward
Help them take the next step with a button or link when possible.
✅ Add your first property
✅ Create a service
Keep it relevant
Tailor the message to the context instead of using a generic fallback.
✅ No bookings match your filters
🚫 There are no items to show
Make it meaningful
Don't add text just to fill in the slots in the component. Make sure each piece of content serves a purpose, or leave it out.
Specific use cases
No initial data
Help them start using the feature or populating with data.
Explain what the user can expect to see once data is added
✅ Once you add a property, you’ll see it listed here.
Prompt action with a clear CTA
✅ Add your first property
No matching result
Help them find what they're looking for.
Restate the criteria in plain language
✅ No bookings match your selected dates and filters.
Offer a next step or helpful link if possible
✅ Try adjusting your filters or resetting them to see all bookings.
Cleared data
Make it clear there is nothing else to do. If appropriate, this can be a good moment for some branded delight.
Confirm the success of the user’s action
✅ You’ve dismissed all notifications.
Acknowledge the empty state without prompting unnecessary action
✅ Nothing left to do here for now.
Error feedback
Explain what's going on, whether they can do anything about it, and what they can expect.
Explain what happened in user-friendly terms
✅ We couldn’t load your reservations. The connection to the server was lost.
Offer a fix or fallback path
✅ Try refreshing the page or checking your internet connection.