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.
Usage Guidelines
When to use this component
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 this component
Temporary feedback messages
Don’t use empty states for feedback that should be presented as a temporary toast or notification.
Best Practices
Always provide a clear next step with a primary button.
Don’t use system icons as visuals instead of illustrations.
If you need to explain the feature further and that requires navigation, place a link below the button/s.
Avoid using illustration if the space is scarce.
General Component Behaviors
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 position
Content inside the empty state is center-aligned, and the entire empty state should be vertically and horizontally centered within its container.
Responsive Behavior
The layout does not change between desktop and mobile, but any interactive elements (such as buttons) inside the component will adapt according to their own responsive properties, ensuring accessibility and usability on all devices.
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.