03 · Components · 피드백
빈 상태Empty State
데이터가 없을 때 사용자에게 다음 행동을 제안. 흔한 실수는 '데이터 없음'만 보이는 것. 왜 없고 무엇을 하면 되는지 알려주세요.
StableWCAG AA
기본
tsx
<EmptyState
icon={<Inbox size={32} strokeWidth={1.5} />}
title="아직 저장된 항목이 없어요"
description="관심 있는 설교를 북마크하면 이곳에서 모아볼 수 있습니다."
action={<Button size="sm">설교 탐색</Button>}
/>미리보기
아직 저장된 항목이 없어요
관심 있는 설교를 북마크하면 이곳에서 모아볼 수 있습니다.
검색 결과 없음
검색어를 다시 확인하거나 필터를 초기화할 수 있도록 안내합니다. 단순히 "결과 없음"보다 구체적인 제안이 효과적입니다.
tsx
<EmptyState
icon={<Search size={28} />}
title="'요한복음'에 대한 결과가 없습니다"
description="철자를 확인하거나 필터를 제거해보세요."
action={<Button variant="secondary" size="sm">필터 초기화</Button>}
/>미리보기
'요한복음'에 대한 결과가 없습니다
철자를 확인하거나 적용된 필터를 제거해보세요.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | 상단에 표시할 아이콘(24-32px 권장). | |
title | string | 왜 비어 있는지 한 문장으로. | |
description | string | 무엇을 하면 되는지 안내. | |
action | ReactNode | 다음 행동을 유도하는 주 버튼. |