Empty state placeholder with illustration, title, description, and optional action buttons. Guides users when there's no content to display and suggests next steps.
Use empty states when there's no data, no search results, or when users need to take action before content appears.
Display when users haven't created any items yet.
Show when searches or filters return no matches.
Communicate errors or unavailable content gracefully.
Empty states can be configured with different illustrations and actions.
Single primary action button.
Primary and secondary action buttons.
Search or filter returned no matches.
Network or connection error state.
Page not found error state.
Illustrations come in three sizes for different contexts.
Compact size for cards or limited space.
Standard size for most use cases.
Large size for full page states.
Follow these guidelines when using empty states.
Writing effective empty state messages.
Short, clear statement of what's missing (3-6 words)
✓ "No projects yet"
✗ "You haven't created any projects"
Explain why it's empty and what users can do (1-2 sentences)
✓ "Get started by creating your first project."
✗ "There are currently no projects available in the system at this time."
Clear, actionable verb phrase (2-3 words)
✓ "Create project"
✗ "Click here to get started"
Empty states are designed to be accessible to all users.
Design and development resources for the Empty State component.