Empty State

The goal of a empty state pattern is to provide a good first impression that helps users to achieve their goals. It should be used when a view is empty because no objects exists and you want to guide the user to perform specific actions. This may occur because the application is newly installed and content has not yet been created or added. This state may also result when all objects are deleted from a collection.

This pattern should NOT be used when:

  • Selected filters cause an empty result. See Filter for guidance on this use case.
  • There is a connectivity issue and the data set cannot be obtained.

Empty State pattern

The empty state pattern is most often used in conjunction with one of the content views(e.g. List View, Table View, and Card View.

Empty State in context

Empty State

Description

Empty State with Callouts

  1. Icon (optional): If an object icon is associated with this view, it can be displayed here.
  2. Empty State Title: Give it a name.
  3. Text (optional): This text should be personal and helpful. It should minimize the user’s effort to complete tasks.
  4. Primary Action Button: The primary action is displayed as a prominent blue button. See the Action Labels section for more information about terminology and wording specific to action labels.
  5. Secondary Action Buttons (optional): Secondary actions are alternative options for the user. They are shown as more subtle gray buttons and located below the main action. There can be more than one secondary action.

Example

Empty State Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn more about this on the documentation.

Reference Markup

<div class="blank-slate-pf " id="">
  <div class="blank-slate-pf-icon">
    <span class="pficon pficon pficon-add-circle-o"></span>
  </div>
  <h1>
    Empty State Title
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>
    Learn more about this <a href="#">on the documentation</a>.
  </p>
  <div class="blank-slate-pf-main-action">
    <button class="btn btn-primary btn-lg"> Main Action </button>
  </div>
  <div class="blank-slate-pf-secondary-action">
    <button class="btn btn-default"> Secondary Action </button> <button class="btn btn-default"> Secondary Action </button> <button class="btn btn-default"> Secondary Action </button>
  </div>
</div>