Empty State

Use empty states to:

• Display when dynamic content has not yet loaded
• Act as a placeholder until the user completes a process that will display other data
• Provide guidance when a page or section fails to load
• Explain why the content is missing and guide users on what to do next
• Show when a search returns no results

Do not use empty states:

• As a permanent page design, empty states are temporary conditions
• Without providing clear next steps or an explanation
• When loading content, use a progress bar or skeleton loader instead for active loading states
• For error messages that require immediate attention, use alert instead

Component structure

The empty state provides a consistent way to offer supporting information and optional buttons to restart or take users to a new flow.

Elements:

1. Illustration Graphic — Brand illustration that provides visual context
2. Heading - Optional Heading to introduce the textual explanation
3. Textual explanation — Clear, helpful instructions that explain the situation
4. Button or Button Groups — Optional buttons that guide users to the next step

Layout

There are two orientations for this component. The layout is based on the viewport size, ensuring the empty state remains clear and centred across screen sizes.