Skip to main content
Empty states appear when there’s no content to display. Good empty state copy transforms a potentially confusing moment into an opportunity to guide users forward.

​
Types of empty states

​
First-use empty states

When users haven’t created any content yet.Purpose: Welcome users and guide them to their first actionPattern: [What this space is for]. [CTA to get started].Examples:
  • “No projects yet. Create your first project to get started.”
  • “Your task list is empty. Add a task to begin.”
  • “No messages yet. Start a conversation to connect with your team.”
Use encouraging language. “Yet” implies content will appear soon and makes the empty state feel temporary.

​
The formula

[Explanation] + [Call to action]
Every empty state should:
  1. Explain why it’s empty
  2. Tell users what to do next

​
Format guidelines

1

Start with the state

Lead with what’s empty or missing.
  • Good: “No data yet.”
  • Avoid: “It looks like you haven’t added any data.”
2

Keep it concise

Empty states should be scannable (under 15 words ideal).
  • Good: “No tasks yet. Create a task to get started.”
  • Avoid: “You don’t have any tasks in your list right now. To get started, you can create a new task by clicking the button below.”
3

Include a clear CTA

Tell users exactly what action to take.
  • Good: “Connect your account to see insights.”
  • Avoid: “Get started to see your data here.”
4

Use encouraging tone

Make the empty state feel temporary and achievable.
  • Good: “No integrations yet. Add your first integration.”
  • Avoid: “You have no integrations.”

​
Examples by context

​
SaaS dashboards

State: User hasn’t connected a data sourceEmpty state: “No data yet. Connect your account to see insights.”Why it works:
  • “Yet” implies this is temporary
  • Clear action (connect account)
  • Explains benefit (see insights)
State: No team members invitedEmpty state: “Just you so far. Invite teammates to collaborate.”Why it works:
  • Friendly tone (“just you so far”)
  • Clear CTA (invite teammates)
  • States benefit (collaborate)

​
Content lists

State: No documents uploadedEmpty state: “No documents yet. Upload your first file.”Why it works:
  • Simple and direct
  • Clear first action
  • Under 10 words
State: User cleared their task listEmpty state: “All done! No tasks remaining.”Why it works:
  • Celebrates achievement
  • Acknowledges cleared state
  • No pressure to create more tasks

​
Search and filters

State: Search returned no matchesEmpty state: “No results for ‘keyword’. Try a different search term.”Why it works:
  • Shows what they searched for
  • Suggests concrete action
  • Not a dead end
State: Filters exclude all contentEmpty state: “No items match these filters. Clear filters to see all items.”Why it works:
  • Explains why it’s empty
  • Provides recovery action
  • Specific about solution

​
Visual pairing

Empty states often include visual elements:

Simple icon

For routine empty states, a simple icon reinforces the message without adding noise.

Illustration

For onboarding or first-use states, a welcoming illustration can reduce anxiety.
Visual elements should support the message, not replace it. Always include text.

​
Common mistakes

Avoid these patterns that frustrate users:
  • Robotic language: “No data available” → “No data yet. Connect your account.”
  • Dead ends: “Nothing here” → “No messages yet. Start a conversation.”
  • Blame language: “You haven’t created any projects” → “No projects yet. Create your first project.”
  • Overly clever copy: “Looks like tumbleweeds around here” → “No activity yet. Create a post.”
  • Too much text: Long explanations → Brief explanation + CTA

​
Before and after examples

​
Example 1: Dashboard

BeforeAfterWhy it’s better
”No data available.""No data yet. Connect your account to see insights.”Adds CTA and benefit
”There is currently no information to display.""No analytics yet. Add tracking code to get started.”Concise + specific action

​
Example 2: Lists

BeforeAfterWhy it’s better
”You don’t have any saved items.""No saved items yet. Save an item to access it later.”Removes “you” blame, adds purpose
”Empty""No files yet. Upload a file to get started.”Explains and guides
BeforeAfterWhy it’s better
”0 results""No results found. Try a different search term.”Adds recovery action
”Sorry, we couldn’t find anything.""No matches for ‘keyword’. Adjust your search and try again.”Shows search term + concrete action

​
Accessibility

Don’t rely solely on illustrations - always include text
Make CTAs keyboard accessible
Use semantic headings to structure empty state content
Ensure illustrations have alt text if they convey meaning

​
Quick checklist

Before shipping an empty state:
  • Explains why it’s empty
  • Provides clear next action
  • Uses encouraging tone (“yet” for first-use)
  • Under 15 words
  • Includes actionable CTA
  • Avoids blame language
  • Works without visuals

Templates

Use the empty state template

Voice and tone

Match tone to your brand

Examples

See real-world improvements