Empty State

This component is a placeholder when content cannot be displayed, with the optional illustration and buttons.

Content guidelines

  • Keep text concise and helpful
  • Explain why the space is empty in plain, friendly language
  • Provide clear next steps or actions when possible
  • Avoid technical jargon or error codes in the primary message

Button placement

When buttons are included:

  • Follow button group guidelines for combinations and placement
  • Ensure the primary action is clear
  • Place buttons consistently below the text explanation

Positioning

The component should be placed in the centre of its container, both horizontally and vertically, to draw attention and provide a clear focal point.