Empty State
Import
<link rel="stylesheet" href="/guide/css/base/index.css" /> <link rel="stylesheet" href="/guide/css/components/empty-state.css" />
States
No Result — 검색 결과 없음
검색 결과가 없어요
다른 키워드로 다시 검색해 보세요
No Data — 데이터 없음
아직 데이터가 없어요
첫 번째 항목을 추가해 보세요
No Network — 네트워크 없음
연결이 끊겼어요
네트워크 상태를 확인해 주세요
No Notification — 알림 없음
알림이 없어요
새로운 알림이 오면 여기서 확인할 수 있어요
Specs
| 요소 | Desktop (≥768px) | Tablet (480~767px) | Mobile (≤479px) |
|---|---|---|---|
| 아이콘 Wrap | 96×96px | 72×72px | 56×56px |
| 아이콘 SVG | 64×64px | 48×48px | 37×37px |
| Title | 18px / Bold | 16px / Bold | 16px / Bold |
| Desc | 14px / Regular | 14px / Regular | 14px / Regular |
| Button | H 40px / 자동 너비 | H 40px / 자동 너비 | H 40px / Width 100% |
| Wrap Radius | var(--radius-lg) — 12px | ||
| Gap | var(--spacing-4) — 16px | ||
| Padding | var(--spacing-8) var(--spacing-6) — 32px 24px | ||
| 타입 | 아이콘 배경 | 토큰 | 버튼 텍스트 |
|---|---|---|---|
| no-result | #e7f4fe | var(--blue-50) | 검색 초기화 |
| no-data | #f0fdf4 | var(--green-50) | + 새로 만들기 |
| no-network | #f3f4f6 | var(--gray-100) | 다시 연결 |
| no-notification | #f0fdf4 | var(--green-50) | 알림 확인 |
Code
아이콘 SVG를 교체해 4가지 타입으로 활용합니다. 버튼이 필요 없을 때는 .empty-state__btn 요소를 제거하세요.
<!-- No Result -->
<div class="empty-state">
<div class="empty-state__icon-wrap empty-state__icon-wrap--no-result">
<svg class="empty-state__icon" viewBox="0 0 40 40" fill="none">
<circle cx="17" cy="17" r="10" stroke="#0b78cb" stroke-width="2.5" fill="#e7f4fe"/>
<line x1="24.2" y1="24.2" x2="31" y2="31" stroke="#0b78cb" stroke-width="2.5" stroke-linecap="round"/>
<text x="12.5" y="22" font-size="11" font-weight="700" fill="#0b78cb" font-family="sans-serif">?</text>
</svg>
</div>
<div class="empty-state__text">
<p class="empty-state__title">검색 결과가 없어요</p>
<p class="empty-state__desc">다른 키워드로 다시 검색해 보세요</p>
</div>
<button class="empty-state__btn">검색 초기화</button>
</div>
<!-- No Data -->
<div class="empty-state">
<div class="empty-state__icon-wrap empty-state__icon-wrap--no-data">
<svg class="empty-state__icon" viewBox="0 0 64 64" fill="none">...</svg>
</div>
<div class="empty-state__text">
<p class="empty-state__title">아직 데이터가 없어요</p>
<p class="empty-state__desc">첫 번째 항목을 추가해 보세요</p>
</div>
<button class="empty-state__btn">+ 새로 만들기</button>
</div>
<!-- No Network -->
<div class="empty-state">
<div class="empty-state__icon-wrap empty-state__icon-wrap--no-network">
<svg class="empty-state__icon" viewBox="0 0 64 64" fill="none">...</svg>
</div>
<div class="empty-state__text">
<p class="empty-state__title">연결이 끊겼어요</p>
<p class="empty-state__desc">네트워크 상태를 확인해 주세요</p>
</div>
<button class="empty-state__btn">다시 연결</button>
</div>
<!-- No Notification -->
<div class="empty-state">
<div class="empty-state__icon-wrap empty-state__icon-wrap--no-notification">
<svg class="empty-state__icon" viewBox="0 0 40 40" fill="none">...</svg>
</div>
<div class="empty-state__text">
<p class="empty-state__title">알림이 없어요</p>
<p class="empty-state__desc">새로운 알림이 오면 여기서 확인할 수 있어요</p>
</div>
<button class="empty-state__btn">알림 확인</button>
</div>
Classes
| 클래스 | 타입 | 설명 |
|---|---|---|
| .empty-state | 루트 | 빈 상태 컨테이너 (flex-col, center, max-width 800px) |
| .empty-state__icon-wrap | 요소 | 아이콘 배경 영역 (96×96, radius-lg) |
| .empty-state__icon-wrap--no-result | 수정자 | 파란 배경 — 검색 결과 없음 |
| .empty-state__icon-wrap--no-data | 수정자 | 초록 배경 — 데이터 없음 |
| .empty-state__icon-wrap--no-network | 수정자 | 회색 배경 — 네트워크 없음 |
| .empty-state__icon-wrap--no-notification | 수정자 | 초록 배경 — 알림 없음 |
| .empty-state__icon | 요소 | 아이콘 SVG (64×64 → 반응형으로 축소) |
| .empty-state__text | 요소 | 제목 + 설명 텍스트 묶음 |
| .empty-state__title | 요소 | 제목 텍스트 (18px Bold, gray-700) |
| .empty-state__desc | 요소 | 설명 텍스트 (14px Regular, gray-400) |
| .empty-state__btn | 요소 | 액션 버튼 (Primary, H 40px, Mobile에서 width 100%) |