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
Styles

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.
To educate users.

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

Empty state do

Empty state dont

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

Title and helper text and gray background — Simple empty state

Title, helper text, call to action and gray background with pattern. — Empty state with call to action

Title, helper text, call to action, icon and gray background with pattern. — Empty state with call to action and icon

Title, helper text, call to action, image and gray background. — Empty state with call to action and image

“Nothing selected” example

Frameless empty state with title, helper text and image.

“First visit” example

Frameless empty state with title, helper text, call to action and image.

“Empty tab content” example.

Empty state with title, helper text, call to action and icon.

Element with and without content

In the below example, 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.

Color

The following table gives reference to the different colors and shades used:

Name	State	Property	Color name
Title	default	Foreground color	Gray 800
Helper text	default	Foreground color	Gray 400
Background	default	Background color	Gray 100
Background	default	Border color	Gray 200
Icon	default	Foreground color	Gray 650
Background	alternative	Background color	White

Typography

The following table gives reference to the different font sizes and weights used in the component:

Name	State	Font-family	Font-size	Line-height	Text-align
Title	all	Siemens Sans	21px	29px	center
Helper text	all	Siemens Sans	17px	23px	center

Sizing and spacing

The following measurements show the dimensions for this component:

Sizing and spacing for empty state with image