EmptyState
Github
StorybookEmptyStates notify the user that the content area or page has no data.
Anatomy
- Container: Outer wrapper that centers the EmptyState content and provides padding.
- Graphic: An optional visual element displayed above or below the content depending on the type. May contain an icon or a custom image.
- Title: The heading that communicates the main intention of the EmptyState or introduce a feature.
- Description: Supporting text that provides context, explains why the state occurred, or describes a feature.
- Secondary action: Secondary action that provides an alternative to the primary.
- Primary action: The recommended action a user can take to address the EmptyState.
Guidelines
When to use
EmptyState is used to communicate that a part of the app, such a page, panel, or table, has no content to display. EmptyStates are intended to guide users to a solution through actions and supplementary resources in optional descriptions.
When data is expected, but there are no results, use an EmptyState. Consider some common use cases:
- First-use experiences: A user has not yet created any items in a section, such as campaigns, segments, or exports.
- No results: Applied filters, searches, or conditions returned zero matches.
- Error recovery: A page failed to load and must communicate the error and how to recover.
- Feature promotion: An empty section can introduce a feature the user has not adopted yet.
EmptyState vs Banner
EmptyStates and Banners are used to communicate important information to users. However, they are not interchangeable and knowing the difference will lead to a better user experience:
- EmptyStates take up the full content area to tell the user that expected information is not available or empty.
- Banners exist within the page's workflow to give users information about the content around it.
If the page already has content and you need to surface a message, use a Banner. If the content area is empty and needs an explanation on why, use an EmptyState.
Flexible composition
The EmptyState is a compound component made of multiple, optional subcomponents. Each subcomponent is assigned a named CSS grid area, so the layout automatically adapts even when some subcomponents aren't included.
For most cases, we recommend adding at least a title and description. Actions can be added to provide guidance to a solution that results in the EmptyState's removal, such as adding missing data. The full EmptyState composition is recommended for experiences brand new to the user.
No items
The simplest meaningful EmptyState includes either a title or description.
No results found
Try adjusting your filters to find matches.
A title with a description adds more context on the intention of the EmptyState.
No campaigns yet
Create your first campaign to start reaching your audience.
A full composition adds the most context and control for users interacting with a new feature for the first time.
Best practices
Actions
If using actions, limit to two buttons and provide at least one primary action. Use the secondary action as an optional alternative.
No campaigns yet
Create your first campaign to start reaching your audience.
Icon selection
Choose icons that are relevant to the content being described, not the EmptyState itself. The icon should reflect the type of item that is missing or the feature being introduced. For all available icons in the library, see the Icons list.
No exports yet
Export your data as CSV to analyze in your preferred tool.
No exports yet
Export your data as CSV to analyze in your preferred tool.
Types
No data available
Try adjusting your filters to find matches.
Default EmptyStates are commonly used to inform users of actions they may take when data is not available.
Automate your customer journeys
Engage with your audience through email, in-app, push, and SMS. Our visual workflow builder makes it easy to set up your automated campaigns.
The promotion EmptyState includes more prominent styling such as a larger title and the option to include an eyebrow badge. A graphic can be used for visual emphasis.
Appearance
Custom graphics
A custom graphic can be used to display illustrations or images in place of the default icon. Graphics are always displayed above the title in the default EmptyState, and below the actions in the promotion EmptyState.
No campaigns
Create a campaign to reach your audience.
Icons provide additional visual context to support the title and description.
No campaigns
Create a campaign to reach your audience.
Custom graphics provide more meaningful visual storytelling to support the title and description.
Behaviors
Eyebrow badge
The promotion EmptyState supports an eyebrow badge rendered above the title. Use it to categorize or label the feature being promoted.
Build your audience
Create segments to target specific groups of people based on their behavior and attributes.
The eyebrow badge displays above the title as a subtle, green label.
Footer
The footer always renders below the EmptyState actions. We recommend using it as a supplementary description area for supporting documentation links.
No custom objects
Track things like companies, accounts, or opportunities alongside your customers.
The footer is used for supplementary text and links below the actions.
Content
Titles
Titles should describe the what's missing in a few words, written in sentence case. For cases where the user will use the feature for the first time, focus the title around the missing item. For cases where there are no results, describe what items weren't found.
Avoid vague titles that give the user no information on what data is expected.
No campaigns yet
Create your first campaign to start reaching your audience.
Nothing to see here
There is no content available at this time.
Promotion titles
Promotion titles are meant to encourage users to use new features within the app. Frame these titles around what action will benefit the user if taken.
Automate your customer journeys
Engage with your audience through email, in-app, push, and SMS.
You have no campaigns
Engage with your audience through email, in-app, push, and SMS.
Descriptions
Descriptions should offer a next step or explain why the state occurred. Keep them to one or two sentences.
No results found
Try adjusting your filters or search term to find matches.
No results found
There are no results to display.
Action labels
Action labels are best used to describe the action the user can take to address the EmptyState. For more information on Button labels, see the Content section within the Button's design documentation.
No data available
Try adjusting your filters to find matches.
No data available
Try adjusting your filters to find matches.
Tone
Match tone to the situation. Statements should be factual and direct, offer a solution, and not cast blame on the user.
Something went wrong
We could not load this page. Please try again or contact support.
Oops!
Looks like something broke. Maybe try refreshing?