Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Patterns


  • General

    • Actions
      • Global actions
      • In-context actions
    • Announcing new features
    • Announcing beta and preview features
    • Communicating unsaved changes
    • Data visualization
      • Chart metric drill down
    • Density settings
    • Disabled and read-only states
    • Drag-and-drop
    • Errors
      • Error messages
      • Validation
    • Empty states
    • Feedback mechanisms
    • Filtering patterns
      • Saved filter sets
      • Filter persistence in collection views
    • Hero header
    • Help system
    • Image magnifier
    • Loading and refreshing
    • Onboarding
      • Hands-on tutorials
    • Selection in forms
    • Service navigation
      • Side navigation
      • Top navigation
    • Service Dashboard
      • Static dashboard
      • Configurable dashboard
      • Dashboard items
    • Secondary panels
    • Timestamps
    • User feedback

  • Generative AI patterns

    • Pattern abstraction
    • Generative AI chat
    • Ingress
    • Generative AI output label
    • Generative AI loading states
    • Progressive steps

  • Resource management

    • Create resource
      • Multipage create
      • Single page create
      • Sub resource create
    • Delete patterns
      • One-click delete
      • Delete with simple confirmation
      • Delete with additional confirmation
    • Edit resource
      • Page edit
      • Inline edit
      • Attribute editing
    • View resources
      • Table view
      • Card view
      • Split view
      • Table with expandable rows
    • Resource details
      • Details page
      • Details page with tabs
      • Details page as a hub
  1. Cloudscape Design System
    • Patterns
    • General: Empty states
    1. Cloudscape Design System
    2. Patterns
    3. General: Empty states

    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.

    Published: May 19, 2020

    On this page

    1. Key UX concepts
    2. General guidelines
    3. Writing guidelines
    4. Accessibility guidelines
    5. Related patterns and components

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    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.

      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 matches0 matches
    No matches

    • Heading

      Explain what the state is.

      For example: 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

    • 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. A description should always sit below a heading, and never appear without one.
    • 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.
    • Don’t use empty states in help panel. Follow the guidelines for help system.

    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

    • Headings should be bold, and not include end punctuation.

    • Empty state:

      • For example: No distributions

    • Zero results state:

      • For example: No matches

    Description

    • Descriptions should have end punctuation, with the only exception being if a description ends with an external link icon, which should not have a period after it.

    • 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.

    • Descriptions should not be in bold text.

    Action button

    • Empty state or Zero results state button label should match the corresponding table button label.

    • 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.

    Related patterns and components

    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.

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
    • About
    • Connect
    • Privacy 
    • Site terms 
    • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Made with love atAWS