Empty states

An empty state occurs when users haven’t created a resource or have deleted all existing resources. A zero results state occurs when users have filtered and there are no matches.

On this page

Key UX concepts

Empty state

Empty state is applicable to table, card view and service dashboards. Display an empty state when the user hasn't created any resources or has deleted all resources.

Empty state in table

Distributions (0)

Distribution ID
Domain name
Delivery method
No distributions

  • Heading

    Explain what the state is.

    Use this text: No [resource(s)]

    For example: No distributions

  • Description - optional

    Only include a description if it provides necessary information for the user about why there are no results.

    For example: Newly added distributions can take up to 48 hours to become available.

  • Action button

    Provides the next action which tells users how to move forward. This should always be a secondary button.

    For example: Create distribution

Zero results state

Zero results state is applicable to table and card view. Display a zero results state when the user has filtered and there are no matches.

Zero results state in cards

Distributions (200)

0 matches
No matches

  • Heading

    Explain what the state is.

    Use this text: No matches

  • Description - optional

    Include a description if it provides necessary information for the user about why there are no results, such as filter constraints are not met.

    For example: You don’t have any distributions in us-east-1.

    For example: You have applied too many filters.

  • Action button

    Provides the next action. In this case it sets the collection view back to the default state. This should always be a secondary button.

    Follow the guideline for clear filter.

    Use this text: Clear filter

Additional empty states

  • Help panel empty state

    When a user triggers the help panel from the right hand side without clicking on an info link on the page, an empty state occurs. Follow the empty state guidelines for help panel.

  • Empty value

    When the user doesn’t provide a value or the value is empty. This doesn’t include errors or a valid value of 0). Use hyphen (-) for any empty values. For example, in table rows or key-value pairs.

  • Empty form controls - no options available

    For empty states in form controls, follow the guidelines for: autosuggest, select, multiselect.

General guidelines

Do

  • Always provide an action. Having no recourse creates confusion and prevents users from moving forward. If no action can be provided, include a link in the description to navigate users to the page where they can complete the action.
  • If additional information is needed, provide a description.
  • Always display a resource counter to reflect the number of resources.

Don't

  • Don’t use empty states for errors. Use the flash bar and status indicator for displaying errors.
  • Don’t repeat heading or button text in the description.

Writing guidelines

General writing guidelines

  • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

  • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

  • Use present-tense verbs and active voice.

  • Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.

  • Avoid directional language.

    • For example: use previous not above, use following not below.

  • Use device-independent language.

    • For example: use choose or select not click.

Component-specific guidelines

Heading

  • Empty state:

    • Use this format: No [resource(s)]

      • For example: No distributions

  • Zero results state:

    • Use this text: No matches

Description

  • If needed, provide a clear explanation of why the state is empty, and any steps the user needs to take.

  • Avoid repeating any copy that is already in the heading or action button.

Action button

  • Follow the writing guidelines for button.

  • Empty state:

    • For example:

      • Create distribution

      • Connect to repository

      • Manage tags

  • Zero results state:

    • Use this text: Clear filter

Accessibility guidelines

General accessibility guidelines

  • Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.

  • Make sure to define ARIA labels aligned with the language context of your application.

  • Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.

  • Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.

Table view

The table view pattern is a collection of resources in a tabular format. It's effective for quickly identifying categories or comparing values in a large text and numerical data set.

Table

Presents data in a two-dimensional table format, arranged in columns and rows in a rectangular form.

Card view

A collection of resources represented as cards. It’s effective for glancing at small sets of similar resources with text, numerical, and imagery data sets.

Cards

Represents a collection of resources.