Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Empty state

For a screen with nothing to show, where the job is to say why and hand over the next step.

Feedback

Live preview

Source

<div class="dc-empty">
  <span class="dc-empty__art" aria-hidden="true">▣</span>
  <h2 class="dc-empty__title">아직 출근 기록이 없어요</h2>
  <p class="dc-empty__body">현장에 도착해서 출근 버튼을 누르면 하루하루 기록이 여기에 쌓입니다.</p>
  <button class="dc-empty__cta" type="button">출근 기록 남기기</button>
  <button class="dc-empty__sub" type="button">기록하는 방법 보기</button>
</div>
.dc-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--dc-3);
  padding: var(--dc-7) var(--dc-5) var(--dc-6);
  background: var(--dc-bg);
  font-family: var(--dc-font);
  text-align: center;
}
.dc-empty__art {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: var(--dc-r-full);
  background: var(--dc-sunken);
  color: var(--dc-text-mute);
  font-size: 28px; line-height: 1;
}
.dc-empty__art--warn { background: var(--dc-danger-soft); color: var(--dc-danger); font-weight: 700; }
.dc-empty__title {
  margin: 0;
  font-size: 17px; font-weight: 700; line-height: 1.4;
  color: var(--dc-text);
}
.dc-empty__body {
  max-width: 280px;
  margin: calc(var(--dc-1) * -1) 0 var(--dc-1);
  font-size: 14px; line-height: 1.6;
  color: var(--dc-text-sub);
}
.dc-empty__cta {
  width: 100%; max-width: 280px;
  min-height: 48px; padding: 0 var(--dc-5);
  border: 0; border-radius: var(--dc-r-md);
  background: var(--dc-brand); color: var(--dc-text-on);
  font-family: inherit; font-size: 15px; font-weight: 700;
  transition: background var(--dc-fast);
}
.dc-empty__cta:active { background: var(--dc-brand-hi); }
.dc-empty__sub {
  min-height: 44px; padding: 0 var(--dc-4);
  border: 0; border-radius: var(--dc-r-sm);
  background: transparent; color: var(--dc-brand-text);
  font-family: inherit; font-size: 14px; font-weight: 700;
  transition: background var(--dc-fast);
}
.dc-empty__sub:active { background: var(--dc-brand-soft); }

How to use it

  • Say why it is empty and what to do next — never ship a bare "No data"
  • Give newcomers a button; for no search results, offer a way to change the query
  • Failing to load is not empty — show errors separately with a retry button

Watch out for

  • Use a real heading (h2) so reading order holds up, not just bold text
  • Mark decorative art aria-hidden and carry the meaning in words

Next