Empty State
UI ComponentsA placeholder screen or section shown when there's no content to display, guiding users on how to get started or explaining why the area is empty.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Empty State coming soon.
How It Works in Apps/Websites
Empty states turn potential dead ends into helpful guidance. They include: an illustration or icon, a headline explaining the situation, descriptive text with context, and often a call-to-action button. Good empty states feel encouraging rather than like errors. They're essential for onboarding and first-time users.
How AI Interprets This Term
When you say 'empty state', AI expects: centered layout with friendly illustration or icon (often line art), headline text below, explanatory subtext, and primary action button. Light, airy design with plenty of whitespace. Usually 300-400px wide content area centered on page.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create an empty state for an inbox with no messages
Design an empty state for a project list: include line-art illustration of a folder, headline 'No projects yet', subtext 'Create your first project to get started', and 'Create Project' button. Centered, light gray illustration, dark text.
Show different empty states: 'no results found' vs 'get started' for first-time user vs 'all caught up' for cleared inbox
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •New user with no content
- •Search with no results
- •Empty shopping cart
- •Filtered list with no matches
When NOT to Use
- •Temporary loading states
- •Errors (use error state)