Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Trạng thái trống

Dùng khi không có gì để hiển thị, cần nói rõ vì sao và chỉ ra việc tiếp theo.

Phản hồi

Xem trước trực tiếp

Nguồn

<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); }

Cách dùng

  • Nói rõ vì sao trống và nên làm gì tiếp — đừng chỉ viết "Không có dữ liệu"
  • Người mới cần một nút; khi không có kết quả tìm kiếm, hãy mở đường đổi điều kiện
  • Tải lỗi không phải là trống — báo lỗi riêng kèm nút thử lại

Điểm cần lưu ý

  • Dùng thẻ tiêu đề thật (h2) để giữ trật tự đọc, không chỉ in đậm
  • Hình trang trí nên đặt aria-hidden và diễn đạt ý nghĩa bằng chữ

Tiếp theo