Empty State

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

Status

Component checklist

Component (RN)

React Native Component Status

Not Started

Figma (RN)

Figma Component Status

Not Started

Code (Web)

HTML/CSS Code

Published

Figma (Web)

Figma Component Status

Published

Key Points

  • Empty states contain three elements: decorative graphic image, textual explanation, and optional call-to-action button or button groups
  • The text should provide helpful instructions to the user
  • Buttons should follow button group guidelines
  • Titles are optional
  • The brand illustration and copy are required
  • This component should be placed in the centre of its parent container

Use an empty state to provide helpful guidance when content is unavailable or not yet loaded.