Design Atlas
한국어
⌘ UX terms & laws

Empty State

빈 상태

The screen you see when there's no data yet. Instead of leaving it blank, explain why it's empty and what to do next.

Also known as: Zero stateBlank slate
···
html
<div class="stage">
  <div class="pane"><div class="tag">A</div></div>
  <div class="pane">
    <div class="ico"></div>
    <p>아직 항목이 없어요</p>
    <button class="cta">+ 새로 만들기</button>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px dashed var(--line);background:var(--surface);display:grid;place-items:center;gap:10px;text-align:center;padding:10px}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.ico{width:15%;aspect-ratio:1;min-width:34px;border-radius:12px;border:2px dashed var(--muted);animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
p{margin:0;font-size:12px;color:var(--muted)}
.cta{border:0;border-radius:8px;padding:8px 14px;background:var(--accent);color:#fff;font-weight:700;font-size:12px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}50%{box-shadow:0 0 0 8px transparent}}

The empty state is often a first impression — new signups, new projects, zero search results all pass through it. A blank white screen with no explanation makes users wonder if something broke.

A good empty state does three things: (1) briefly explains why it's empty, (2) offers a CTA toward the next action, and (3) softens the negative feeling with a light illustration where it fits. Zero search results getting a spelling suggestion or a "clear filters" button follows the same logic.

A is a list with no explanation; B pairs an icon, a message, and a CTA.

When to use

Don't skip the zero-data state for any list, dashboard, or search result. Keep it visually distinct from a loading state.