Empty state UX
A pattern for guiding users when a view has no data yet.
Preview
No items yet
Create your first item to get started. All your data will appear here.
Create itemWhen to use
- First launch with no user-generated content
- Search or filter returns zero results
- Cleared or archived all items in a list
Anatomy
Icon
A muted, relevant illustration or glyph.
Message
A concise headline and supporting sentence.
Action
A clear CTA to resolve the empty state.
Anti-patterns
- Showing a blank white area with no guidance
- Overloading with multiple competing CTAs
- Using jargon or error codes in the message