Anatomy
- Illustration (optional): A visual element that supports the message of the empty state.
- Title: A concise explanation of the feature or the reason for the empty state.
- Description: Additional context to help users understand the situation.
- Actions: Clear next steps or options for the user to take.
When to use empty states
Empty data tables
Display an empty state when a table has no rows to show, helping users understand why the table is blank and what they can do next.
First-time use of a feature that depends on data
Use an empty state to introduce features that require user input or data before anything is displayed, guiding users on how to get started.
Empty search or filters results
Show an empty state when searches or filters return no results, explaining the situation and suggesting possible next steps.
Failure and success states resulting in no data
Present an empty state after an action (such as clearing all notifications) to reassure the user that everything is up to date and there is nothing left to review.
When not to use empty states
Temporary feedback messages
Don’t use empty states for feedback that should be presented as a temporary toast.
Best practices
Always provide a clear next step with a primary button.
If you need to explain the feature further and that requires navigation, place a link below the button/s.
Don’t use system icons as visuals instead of illustrations.
Avoid using illustration if the space is scarce.
Don’t use more than 1 primary action.
Width
Empty state’s maximum width is 400px. If container is smaller than 400px, Empty State will fill out the available width.
Content alignment and positioning
Content inside the empty state is center-aligned, and the entire empty state should be vertically and horizontally centered within its container.
Content guidelines
- Aim for a short, clear title — ideally one line.
- Provide additional context or guidance as the description. Up to 3–4 lines if necessary.
- Avoid blaming the user or using negative language.
- Always provide a path forward (e.g, with an action), unless empty state is the desired end state.
For further information, see the Content Styleguide.