Empty state

Empty states appear when there is no data to display or a user sees a screen for the first time.

    Anatomy

    1. Icon: An image or icon that relates to the situation.
    2. Title: A short and concise explanation. Should be for formulated in a positive way, e.g. saying "Create a public uptime page" instead of "You have no public status pages".
    3. Description: Additional information that explain why the space is empty.
    4. Primary action: Recommended the most important next step a user can take.
    5. Secondary action: Optional secondary action if applicable.

    Main title

    A description that explains the empty state.

    Secondary action

    Guidelines

    Types of empty states

    In general, there are three different types of empty states:

    1. First-time use empty states: These empty states occur when a user sees a feature for the first time. The empty state should explain the feature, and help the user to take the next step to use the feature.
    2. User action empty states: These empty states occur as a result of a user action, for instance if a user has applied some filters. The empty state should clearly explain why there are no search results and provide a next step to reset the actions.
    3. Error empty states: These empty states occur when data could not be retrieved for some reason. The empty state should explain why the data could not be retrieved (e.g. if there's a permission issue or a system issue) and if possible provide a next step to resolve the issue (e.g. change permission or reload).

    Checklist

    Empty states should always help the user figure out the next step. A user should instantly be able to get answers to these questions:

    1. What am I seeing here?
    2. Why am I seeing this?
    3. What can I do next?

    Examples

    First-time use empty state

    Status pages

    Create a public uptime page

    Learn how to set up status pages and public uptime monitoring in our documentation.

    <div class="c-box mb-0">
  <div class="c-box__header flex justify-between items-center">
    <h2>Status pages</h2>
    <label class="c-textfield -my-2">
      <input type="text" className="c-textfield__input" placeholder="Filter" />
    </label>
  </div>
  <div class="px-5 py-8 max-w-md mx-auto text-center">
    <FontAwesomeIcon className="text-2xl mb-4 text-gray-600" fixedWidth icon={faTrafficLight} />
    <h2 class="c-heading--base">Create a public uptime page</h2>
    <p class="text-gray-700">Learn how to set up status pages and public uptime monitoring in our <a class="c-link" href="#">documentation</a>.</p>
    <button class="c-button c-button--sm c-button--white mt-4">New status page</button>
  </div>
</div>
    Show more

    User action empty states

    Status pages

    Name & UrlStatus

    No status page found

    We haven't found any status pages with the name "Homepage"

    <div class="c-box mb-0">
  <div class="c-box__header flex justify-between items-center">
    <h2>Status pages</h2>
    <label class="c-textfield -my-1">
      <input type="text" className="c-textfield__input" placeholder="Filter" value="Homepage" />
    </label>
  </div>
  <table class="c-table">
    <tbody>
      <tr>
        <th class="c-table__th">Name & Url</th>
        <th class="c-table__th">Status</th>
      </tr>
      <tr>
        <td class="c-table__td text-center py-8" colspan="2">
          <FontAwesomeIcon className="text-2xl mb-4 text-gray-600" fixedWidth icon={faSearch} />
          <h2 class="c-heading--base">No status page found</h2>
          <p class="text-gray-700">We haven't found any status pages with the name "Homepage"</p>
          <button class="c-button c-button--sm c-button--white mt-4">Reset filter</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
    Show more

    Error empty states

    Status pages

    Something is wrong

    We we're unable to load the status pages. Please try again or contact our support if the problem persists.

    Contact support
    <div class="c-box mb-0">
  <div class="c-box__header flex justify-between items-center">
    <h2>Status pages</h2>
    <label class="c-textfield -my-2">
      <input type="text" className="c-textfield__input" placeholder="Filter" />
    </label>
  </div>
  <div class="px-5 py-8 max-w-md mx-auto text-center">
    <FontAwesomeIcon className="text-2xl mb-4 text-gray-600" fixedWidth icon={faExclamationTriangle} />
    <h2 class="c-heading--base">Something is wrong</h2>
    <p class="text-gray-700">We we're unable to load the status pages. Please try again or contact our support if the problem persists.</p>
    <button class="c-button c-button--sm c-button--white mt-4">Try again</button>
    <a class="c-link block mt-3" href="#">Contact support</a>
  </div>
</div>
    Show more