Empty state

Usage

The main principle in using an empty state is to improve user experience by providing reassurance, clarity and actionable steps. Other advantages of a well-designed empty state are that they:

• reduce confusion
• communicate system status
• increase how people learn your product
• improve how people discover product features
• provide guidance

Do

• Use an empty state where no data exists, such as in a list when a filter has been misapplied.
• Provide a button to action next steps if appropriate.
• Only use an empty state to represent lack of data for an entire component, such as a table.

Don't

• Don’t default to an empty state if data is being processed, use a loading spinner instead.
• Never use an empty state to hide an error state, use an alert instead.
• Avoid using an empty state within one part of a complex component, such as in a header row of a table.

---

Anatomy

Empty states include a non-interactive image and supporting text. Variants may also include one or two buttons to initiate user actions.

---

Live Playground

---

Types

Empty states can be configured with elements to suit a range of contexts.

Icons provide a visual hint for faster understanding or to differentiate between different empty states in the same page.

Pictograms

Images strengthen the meaning of other content with a visual metaphor. Use this when the empty state is the primary element on a page.

Action buttons allow a user to take action to resolve the empty state.

• Primary buttons can be used if there is an obvious way to overcome the Empty State.
• Secondary buttons can be added to provide complementary actions to support the primary button, or as an alternative solution.

Variants

• Default includes a title and description to give information about the nature of the Empty State.
• Single button has a primary button beneath the description.
• With icon replaces the image with an icon, above the title.
• With pictogram
• Without image only has a title, description and a primary button.
• Without title has an image, description and primary button.
• Without description has an image, title and primary button.
• No action buttons only include an image, title, description.

---

Format

Size

Empty state is available in small and large sizes.

Alignment

All elements in the empty state are centre-aligned. When all elements are used, they sit in a vertical stack.

• An icon or image sits above text.
• The title is above the description.
• Primary buttons are positioned below the text, but can have different position.

---

Content

Content in empty states can include images, icons and text. All these elements should be:

• Positive – focused on user benefit to help the user reach a goal.
• Explicit – explain exactly what users need to do to fill the Empty State.
• Holistic – work together to meet voice and tone guidelines.
• Indicative – indicate which data or information will occupy the space.

Writing titles, descriptions and labels.

Titles, descriptions and button text are an integral part of empty state design. The content you use should reassure users, provide guidance and maintain a positive experience for all people. Including correct h-tags in semantic markup is vital to allow navigation for users of assistive technology.

Titles are short statements which explain the reason for the Empty State, e.g.: ‘No data found’.

When writing titles:

• Be informative and scannable.
• Use as few words as possible.
• Write in sentence case.
• Avoid punctuation unless it's a question.

Descriptions suggest steps to resolve the issue, e.g., ‘Please refine your search to view more results’.

When you write accessible descriptions, ensure they:

• Include a suggestion for resolving the issue.
• Avoid repeating content from the title.
• Are a maximum of two lines when centre-aligned.
• Use plain language, not jargon.

Button labels explicitly indicate exactly what happens when a user interacts with them.

When you write button labels, ensure they:

• Use imperative verbs such as ‘Add' or ‘Create’.
• Avoid vague terms such as ‘OK’.
• Provide an opt-out such as ‘Dismiss’ or ‘Cancel’.
• Limit text to one or two words.
• Ensure the call to action complements the title of the empty state.
• Allow further interaction and discovery to encourage users to explore the app or product.

Voice and tone

Choosing words, sentences and punctuation that are clear, reassuring, and actionable improves how users experience your product. The impact of content on user experience of your product and the Shell brand means choosing language with purpose and context in mind.

• Voice is the personality of the Shell brand.
• Tone is a mood, and changes to reflect context.

Read more about voice and tone in our content guidelines.

Images and icons

Images and icons are non-interactive visual information which enhance the meaning of the empty state. When matched with the context, they reinforce meaning and work in harmony with text to convey an appropriate tone.

Read more about Shell DS icons in our iconography guidelines.

---

Accessibility

Screen readers

Ensure that semantic markup supports people using assistive technologies so that they can scan content in the empty state. Titles must be correctly identified with the relevant h tags to enable navigation by users of assistive technologies.

Image alt-tags

Empty states contain informative images which convey a simple concept or information. These images may not correspond exactly with the text in title and heading, so an appropriate alt-tag must be written to convey the meaning of the image. For more guidance, please refer to WCAG accessibility best-practice on informative images.

Colour contrast

Ensure colour contrast in images and button labels meet colour contrast ratio of at least 3:1. Text on labels requires a contrast ratio of 4.5:1.

---

Related

• Illustration guidelines
• Iconography guidelines
• Content guidelines