Empty state > Anatomy


There are 6 components in an empty state:

( * ) = required

  1. Title * - this is most commonly use to describe the feature title, component title, or page title depending on the context of the empty state
  2. Description * - the description of the empty state, this includes an informative way to describe the feature or error messages as well as providing a constructive guideline.
  3. Link to doc - in most cases we will try to provide a link to relevant documentation in case a user needs more information about this feature.
  4. Primary action * - a primary action such as ‘commission’, ‘run’, etc. These actions need to help solve our users’ problems.
  5. Secondary action - a secondary action is an action that may be an alternative to the first action such as when a user can perform more than one action as a solution.
  6. Image (optional) - include an image, brand image, or icon that is relevant to the situation of the empty state.