Empty State
空状态
The block you show when a list is completely empty — it should explain why it is empty and what to do next.
Live Demo
Actually clickableNo photos yet
Import the photos on your phone and you can start analysing and cleaning up.
What you just saw:A brand-new album saying "No photos yet — take one" with a camera icon and a "New album" button.
What it actually is
The empty state is the most underrated pattern in the set. The default implementation is the words "No data", which wastes the single most confusing moment a user has. A good empty state carries three things: why it is empty, what can be done, and which button to press.
Anatomy · What it's made of
Illustration插图
Light line art, nothing too busy
Title标题
Names the current state
Description描述
Why it is empty + how to fill it
Primary Action主操作
One unambiguous button
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| A list, search result, or inbox has nothing in it | Yes |
| It is the user first time and the page is completely blank | Yes |
| A filter combination returned no results | Yes |
| A task is finished (every item on a checklist is done) | Depends |
| The content is merely still loading | No |
Three kinds of empty state need different treatment: "never created anything", "no results for this filter", and "task complete" — the copy and the recommended action are completely different.
The empty-state illustration is a supporting actor, not the star.
Similar Patterns
Don't mix these upEmpty StateCurrent
空状态
The block you show when a list is completely empty — it should explain why it is empty and what to do next.
Error State
错误状态
Something actually broke — not "no data", genuinely broken — and the user has to be told what to do about it.
In one line:The block you show when a list is completely empty — it should explain why it is empty and what to do next.
CTA
行动号召按钮
The single most important button on the page — it is the one thing you want the user to do next.
Skeleton
骨架屏
Before the data arrives, lay out the future layout using grey blocks so the shape of the page is already on screen.
Error State
错误状态
Something actually broke — not "no data", genuinely broken — and the user has to be told what to do about it.
Empty State
空状态
The block you show when a list is completely empty — it should explain why it is empty and what to do next.
How to tell AI
Three levels of promptAdd the component name and specifics
When a search returns nothing, show an empty state: the title "No photos match your search", the description "Try removing some filters or searching for something else", and the primary action "Clear all filters".
Don't just say this to AI
Bad → BetterDon't say this to AI
Show "no data" when there is no data.
Say this instead
Write the empty state in three parts: a title naming the current state + a description explaining why it is empty and how to fill it + one clear primary action. Keep the copy distinct for "first run / no filter results / task complete", and never reuse the skeleton styling.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.