Empty State
Display helpful messages when there is no content to show
Basic Usage
Simple empty state with icon, title, description, and action
No articles found
Get started by creating your first article
Codetsx
Without Action
Empty state without action button
Inbox is empty
You're all caught up! No new messages.
Search Results
Empty state for search results
No results found
Try adjusting your search or filter to find what you're looking for.
Multiple Actions
Empty state with multiple action buttons
No team members yet
Invite your team to start collaborating
Props
| Name | Type | Default | Description |
|---|---|---|---|
icon | React.ReactNode | — | Icon to display at the top |
title | string | — | Title of the empty state |
description | string | — | Optional descriptive text |
action | React.ReactNode | — | Action button(s) to display |
className | string | — | Additional CSS classes |
Usage Guidelines
When to use
- When there is no content to display (empty lists, search results, etc.)
- To guide users towards the next action
- To provide an explanation for why there is no content
Best Practices
Do
- ✓ Use clear, helpful messaging that explains why the state is empty
- ✓ Provide actionable next steps when appropriate
- ✓ Include relevant icons to make the state more visually engaging
- ✓ Keep descriptions concise and informative
Don't
- ✗ Don't use empty states for loading states
- ✗ Don't overwhelm with too many action buttons
- ✗ Don't use technical jargon in user-facing messages
- ✗ Don't leave users without guidance on what to do next