Empty state
Empty states occur when there is no content to display. They provide users with feedback on the state of a content area and what they can do next.
Usage
When to use
Use an empty state in the following cases:
- When no data exists yet.
- When users need to take actions to display content.
- When a search or filter returned no results.
Types
There are the following empty state types:
Empty state
An empty state appears within the content of a region and fills out only a part of it (area, section, element).
Frameless empty state
The frameless empty state fills out the whole region. It has no background.
General construction
An empty state consists of the following elements:
1. Icon or image (optional)
- Use an icon or image to support your empty state message.
- Use an image for empty states that occur in big areas and an icon for empty states that occur in small areas.
2. Title
- Provide information to the user about the reason for existence of an empty space.
3. Helper text
- Describe the next steps or possible actions for the user.
4. Call to action (optional)
- Provide the user with a next step, a link to another section or a primary button to interact with.
5. Background (optional)
- Has a border.
- Can be white or gray.
- Can have an optional background pattern.
- It is recommended not to use a background pattern for empty state with an image.
Options
The following empty state options are available:
Simple empty state
Empty state with call to action
Empty state with call to action and icon or image
Do’s & Don’ts
- Use an empty state with the defined options above.
- Do not use containers to build empty states.
Style
This chapter shows several empty state styles in the design system.
Overview
“Nothing selected” example
“First visit” example
“Empty tab content” example.
Element with and without content
In the example below, the element with content (B) replaces the empty element (A) after the first creation of an asset. If possible and logical, provide a button in the element with content (B) with the same function as in the empty element (A) and with consistent naming.
Typography
The following table gives reference to the different font sizes and weights:
Name | State | Font-family | Font-size | Line-height | Text-align |
---|---|---|---|---|---|
Title | all | Siemens Sans Roman | 21px | 29px | center |
Helper text | all | Siemens Sans Roman | 17px | 23px | center |
Sizing and spacing
The following measurements show the dimensions for this component: