Design Atlas
한국어
❝ UX writing

Empty-State Copy

빈 상태 문구

The text shown when a list has nothing in it. "No data" is a dead end; "create your first one" is a starting line.

Also known as: Zero state copy
···
html
<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <svg class="icon" viewBox="0 0 40 40"><circle cx="20" cy="20" r="15" fill="none" stroke="var(--muted)" stroke-width="2"/><line x1="12" y1="20" x2="28" y2="20" stroke="var(--muted)" stroke-width="2"/></svg>
    <p class="copy" id="bt"></p>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <svg class="icon" viewBox="0 0 40 40"><circle cx="20" cy="20" r="15" fill="none" stroke="var(--accent-3)" stroke-width="2"/><line x1="20" y1="13" x2="20" y2="27" stroke="var(--accent-3)" stroke-width="2"/><line x1="13" y1="20" x2="27" y2="20" stroke="var(--accent-3)" stroke-width="2"/></svg>
    <p class="copy" id="gt"></p>
    <button class="cta" id="gb"></button>
    <p class="why" id="gw"></p></div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:16px 14px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.mark{position:absolute;top:10px;right:12px;font:800 16px/1 system-ui;color:var(--accent-2)}
.good .mark{color:var(--accent-3)}
.label{position:absolute;top:10px;left:12px;font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.icon{width:20%;margin-top:14%}
.copy{margin:2px 0 0;font:650 clamp(11px,3vmin,14px)/1.35 -apple-system,sans-serif;color:var(--fg)}
.cta{margin-top:2px;padding:5px 12px;border-radius:8px;border:0;background:var(--accent);color:#fff;font:700 11px/1 -apple-system,sans-serif}
.why{margin:auto 0 0;font:500 11px/1.3 -apple-system,sans-serif;color:var(--muted)}
js
const bt = document.getElementById('bt'), bw = document.getElementById('bw');
const gt = document.getElementById('gt'), gw = document.getElementById('gw'), gb = document.getElementById('gb');
const L = {
  ko: { bt: '데이터가 없습니다', bw: '그다음 행동이 없음', gt: '아직 프로젝트가 없어요', gb: '첫 프로젝트 만들기', gw: '원인 설명 + 바로 실행 버튼' },
  en: { bt: 'No data', bw: 'no next step', gt: 'No projects yet', gb: 'Create your first project', gw: 'explains why + gives an action' },
};
let lang = 'ko';
function paint() {
  const t = L[lang];
  bt.textContent = t.bt; bw.textContent = t.bw; gt.textContent = t.gt; gb.textContent = t.gb; gw.textContent = t.gw;
}
paint();
setInterval(() => { lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2400);

An empty screen isn't a failure state — it means the user hasn't acted yet, and it's the most natural place to suggest what to do next. "No data" just wastes that opening.

Good empty-state copy explains why it's empty (first-time user vs. a filter with no matches) and pairs that with an action the user can take immediately. Those two causes are different, so the copy for each should be too.

The demo's ✕ merely reports a fact; ✓ turns the same space into the first step.

When to use

Write separate copy for a brand-new list, a zero-result search, and a zero-result filter — the cause differs, so the message should too.