Empty States
Empty states occur when there is no content to display — on first use, after a search with no results, when an error prevents loading, or when access is restricted. A good empty state turns a dead end into a guided next step.
Components used
Anatomy
Best practices
First-use empty state
Welcome the user and guide them to their first action. "No projects yet — Create your first project" with a primary Button. Use a friendly illustration and encouraging language. This is your first impression.
No results
Acknowledge the search/filter attempt and suggest adjustments. "No results for 'xyz' — Try a different search term or clear your filters." Provide a clear way to reset filters. Never show a blank page.
Error state
Explain what went wrong in plain language (not error codes) and offer a retry action. "Something went wrong loading your data — Try again" with a retry Button. If the error persists, suggest contacting support.
Permission state
Explain what the user would see if they had access, and provide a clear path to request it. "You don't have access to this project — Request access from your admin." Never show a generic 403 page.
Hierarchy
Follow a consistent visual hierarchy: icon/illustration at the top, heading below, description text, then action button. Center everything horizontally and vertically in the available space.