Empty State
An Empty State is displayed when there is no data or content to show in a particular section or page of an application. This state informs users that the expected content isn’t currently available and typically offers guidance on what to do next.
Usage
Communicate status: Let users know that there’s nothing to display, rather than leaving a blank screen.
Encourage action: Provide instructions or calls to action (e.g., “Create your first project,” “Add a new contact”).
Offer assistance: If relevant, include a quick tutorial, tips, or links to documentation that help users get started.
Use cases
No search results found for a specific query
A list or dashboard that hasn’t been populated yet (e.g., no tasks created, no messages)
A new account or profile page with no activity or items
Not to be confused with
Loader: A loading state indicates that content is still being fetched or processed. An empty state, by contrast, indicates that no content is available, even if loading is complete.
Skeleton: Placeholders can show skeleton or grey boxes to indicate where content will eventually appear. An empty state is a finished view that informs the user there is nothing to display after loading completes.
Best practices
Be clear and concise
Use straightforward language that explains why there’s no content and what the user can do next.
Include a call-to-action (CTA)
If the user can create or add the missing content, provide a direct link or button (e.g., “Create New Item”).
Use visuals thoughtfully
Minimal imagery or icons can help lighten the mood and guide the user, but avoid clutter.
Maintain consistency
Ensure that all empty states in your product follow a similar format (e.g., same illustration style, consistent messaging and action buttons).
Handle different cases gracefully
Differentiate between “first-time use” empty states (e.g., brand new user) and “no results” states (e.g., search returned zero matches).
Be mindful of accessibility
Provide descriptive text for any illustrations.
Make sure buttons and links are focusable and easily discoverable by screen readers.
Match the tone of your interface or brand voice—an empty state can be a great opportunity to add helpful and friendly messaging.
Summary
An Empty State is a key part of any user interface, preventing confusion when data or content doesn’t exist. By clearly informing users why there’s no information, offering an appropriate call-to-action, and maintaining a consistent style, you ensure a user-friendly experience that helps guide them toward the next steps—even when there’s nothing (yet) to display.
