Empty State Patterns
Empty states guide users when there is no content to display. They should be encouraging, helpful, and provide clear next steps.
When to Use Empty States
| Type | Context | Message Tone | Call-to-Action |
|---|---|---|---|
| First Use | User has not created any content yet | Encouraging, welcoming | Create first item |
| No Results | Search or filter returned nothing | Neutral, helpful | Adjust search, clear filters |
| Cleared | User deleted all content | Neutral, supportive | Create new item |
| Permission Denied | User lacks access to view content | Informative, not accusatory | Request access |
First-Use Empty States
When users first encounter a feature, empty states should be welcoming and guide them to create their first item.
No Budgets Yet
No budgets yet
Create your first budget to start tracking your spending.
No Appointments
Your calendar is empty
Add your first appointment to get started with scheduling.
No Travel Plans
Ready for an adventure?
Start planning your next trip by adding a destination.
Search with No Results
When a search returns no results, provide helpful suggestions to refine the search or try alternative actions.
Interactive Search Demo
With Alternative Actions
No transactions found
We could not find any transactions matching your search.
Filtered List with No Matches
When filters are applied but no items match, provide a way to adjust or clear filters.
Interactive Filter Demo
Multiple Active Filters
No transactions found
No transactions match your current filters:
- Category: Food
- Date Range: Last 7 days
- Amount: More than 50 EUR
Cleared or Deleted Content
When users have deleted all content, the empty state should acknowledge this and encourage them to create new content.
All Tasks Completed
All done!
You have completed all your tasks. Great work!
Inbox Zero
Inbox zero achieved!
You are all caught up. No messages to display.
Trash Emptied
Trash is empty
Deleted items will appear here for 30 days before being permanently removed.
Empty Dashboard Sections
Dashboard sections may be empty when there is no relevant data or opportunities to display.
No Opportunities
No suggestions right now
Fidus will show relevant suggestions here when opportunities arise.
No Recent Activity
No recent activity
Your recent actions and updates will appear here.
No Upcoming Events
Nothing scheduled
You have no upcoming appointments or events.
Permission Denied Empty States
When users lack permission to view content, explain why and provide a path forward.
No Access
You don't have access
You need permission to view this content. Contact your administrator for access.
Feature Not Available
Feature not available
This feature is not included in your current plan.
Empty State vs Error State
It is critical to distinguish between empty states and error states to provide the right user experience.
Empty State
- ✓System is working correctly
- ✓No content exists (yet)
- ✓Encouraging and helpful tone
- ✓Call-to-action to create content
No budgets yet
Create your first budget to start tracking spending.
Error State
- ✗Something went wrong
- ✗Content should exist but cannot load
- ✗Informative and solution-oriented
- ✗Recovery or retry options
Failed to load budgets
Usage Guidelines
When to use
- •When there is no content to display in a section or page
- •When a search or filter returns no results
- •When a user first encounters a feature before creating content
- •When a user has deleted all content from a list
- •When a user lacks permission to view content
Best practices
- •Use friendly, encouraging language that motivates action
- •Include a clear call-to-action that helps users proceed
- •Use icons or illustrations to make empty states more engaging
- •Explain why the state is empty and what the user can do
- •For search/filter states, show the query or active filters
- •Never leave empty states completely blank
Accessibility
- •Empty state messages are announced to screen readers
- •Call-to-action buttons have descriptive labels
- •Icons are decorative and hidden from screen readers
- •Focus management when transitioning from content to empty state
- •Keyboard users can navigate to and activate call-to-action buttons
Do's and Don'ts
✓ Do
- •Use friendly, encouraging language
- •Include a clear call-to-action
- •Use icons to make empty states engaging
- •Explain why the state is empty
Ready to start budgeting?
Create your first budget to take control of your spending.
✗ Don't
- •Use negative or discouraging language
- •Leave empty states completely blank
- •Show a generic "No data" message
- •Confuse empty states with error states
No budgets
The budget list is empty.
Related Components
Empty Card
Component for displaying empty states
Alert
Inline contextual messages
Button
Actionable buttons for CTAs