Empty states

Empty states are used to fill blank spaces when no content is present, or when the feature is temporarily empty. They are meant to propose a path forward.

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

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.

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.