Empty States

Use empty states to explain why there's no content to display and guide users on what to do next.

Default Empty State

No documents yet

You haven't uploaded any documents. Upload your first document to get started.

Upload document

<div class="empty-state">
  <img src="/icons/ui/file.svg" alt="" class="empty-state-icon">
  <h3 class="empty-state-title">No documents yet</h4>
  <p class="empty-state-description">
    You haven't uploaded any documents.
  </p>
  <button class="btn btn-primary">Upload document</button>
</div>

Search Empty State

No results found

We couldn't find any results for "passport renewal". Try using different keywords or check your spelling.

Clear search

Error Empty State

Unable to load data

There was a problem loading your applications. Please try again.

Try again

First-time User

Welcome to your dashboard

This is where you'll see your applications and notifications. Start by submitting your first application.

Start applicationLearn more

Completed State

All caught up!

You have no pending tasks. Check back later for updates.

Best Practices

Do

• Explain why the area is empty
• Guide users on what to do next
• Use friendly, helpful language
• Include a clear call to action when applicable
• Use relevant icons to reinforce the message

Don't

• Don't leave areas completely blank
• Don't use technical error messages
• Don't make users feel like they've done something wrong
• Don't use generic messages like "No data"

When to Use

• Empty lists or tables
• No search results
• First-time users with no data
• Filtered views with no matches
• Failed data loads
• Completed task lists

Accessibility

• Use a heading to describe the empty state
• Make icons decorative with empty alt text
• Ensure action buttons are clearly labelled
• Don't use colour alone to convey meaning

CSS Classes

.empty-state { }
.empty-state-icon { }
.empty-state-title { }
.empty-state-description { }
.empty-state-error { }