Empty State
空状态
Aliases:Empty State空状态页面空白页占位无数据占位空数据提示零数据状态暂无内容
What is it
When a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- First use before any data exists
- Searches or filters with zero matches
- Content cleared by an action that needs a recovery path
✕ When not to use
- A momentary load — use a skeleton instead
- Missing data caused by errors — use a distinct error state
- Editing canvases where users need blank freedom
Variants
First use
首次使用
Illustration plus a primary CTA to create the first item
No results
无搜索结果
Explains the miss and offers a "clear filters" way out
Minimal
极简
A single line of copy for secondary areas
Implementation
flex centeringsvg strokeborder-dashedmin-heightKeep the empty container at a min-height close to the populated layout to avoid jumps; draw the illustration as a simple stroked SVG (stroke: currentColor) that follows the theme; copy should explain why it's empty and point to one action — a single primary CTA, with secondary options demoted to links. Never reuse the empty state for failures; design a separate error state.
Related concepts
Grey placeholder blocks that mirror the real content structure while loading, usually with a subtle shimmer or pulse. It tells users "content is coming and it will look like this" instead of a blank page or a bare spinner.
PatternsSimilarIntroduces an interface with an overlay, a spotlight cutout and step bubbles: each step reveals one key area and explains it in place, paced by prev/next controls and a step indicator, always skippable. The explanation lives where the feature happens instead of making users hunt for docs.
PatternsSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsUsed withNarrows a large list to whatever matches the current input: every keystroke filters the list in place, with hit counts and an empty-state hint. Finding becomes pruning — no submit, no page jump, feedback stays right in front of the user.
PatternsSimilarA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsUsed with