Usage
A useful empty state will let the user know what’s happening, why it’s happening, and what to do about it.
They are most commonly seen the first time a user interacts with a product or page but can also be encountered when data has been deleted or is unavailable.
Anatomy
- Illustration (optional): The illustration is used to give the user more insight into what will be available on the page when data has been added or is available. For detailed documentation on our illustrations, view Booster Illustrations.
- Title (optional): The title gives the user an understanding of the message or decision they are being presented with. Ideally, the title should not span more than one line.
- Body: The body provides supporting content for the title and gives guidance to the user on what next steps to take. The body text should be kept straightforward and span no longer than three lines.
- Action (optional): An action associated with the message. This action should be the next step the user will take on the page or in the workflow that presented the empty state.
For detailed documentation on our Empty states anatomy, view the design specs.
Layout & structure
The layout and structure of any empty state is determined by application and component context.
Cards
Cards are a very common component for holding empty states. Use a hero or spot illustration based on your use case. For detailed documentation on Illustrations, view the Illustration design specs.
For detailed documentation on Cards, view the Card design specs.
Small card
Large card
Large spaces
When the empty state is not confined to a card or smaller area, it may be helpful to the user to make use of the entire space for an empty state. If an illustration is needed for an empty state in a large space, a hero illustration is better suited due to its larger size.
Centered
Text-heavy
Tables
Empty states help guide a user when interacting with an empty table and help them accomplish their next course of action. A title and body text is required within an empty state in a Table.
For detailed documentation on Tables, view the Table design specs
When to use
| Type | Use case | Goal |
|---|---|---|
| First use | Occurs in a new product when the user has not started a workflow. For example:
| Explain to the user where and how to get started within the new product |
| No results data | Occurs when the user has successfully completed an action or query but no results or data is returned. For example:
| User understands empty state and is enabled to add data or correct query |
| User cleared | Occurs when the user has cleared all data on the page. For example:
| Explain to the user why no data is being shown in an inbox or table |
Types
First use
This Empty state appears when a user is entering a product for the first time and has no data shown. Body text should be used to explain to the user where and how to initiate the workflow. An illustration, title, and action are all optional depending on the space and workflow.
First use in a full-page
It is recommended that an illustration, title, body text, and action all be used when a first use empty state is used in a full page. This will give the user the most guidance and delight when entering a new product.
First use in a full-page on a mobile device
First use in a table
It is recommended that a title, body text, and action all be used when a First use empty state is used within a table. Give clear and concise guidance within the body text to help the user navigate to an action to get started.
No results / data
This Empty state surfaces where data would appear, but no data is available at the moment, or no results are returned for the specific query. A clear and concise title is used to point out the reason why no results/data are shown and body text is used under the title to provide more context. Depending on the scenarios, it may be recommended to have a secondary call to action button to provide users with a clear next step.
A use case for this Empty state would be when an image preview is unavailable for the user, such as on a Content details page for an imported piece of content.
No results / data on a mobile device
User cleared
This Empty state appears when the user has cleared all data on a page, such as an alerts inbox. For this Empty state, body text should be used to explain to the user why no data is being shown. An illustration, title, and action are all optional depending on the space and workflow.
User cleared on a mobile device
Alternative considerations
- Use Error patterns when a user encounters an error.