빈 상태
데이터가 없을 때 이유와 다음 행동을 안내하는 정적 표시다. 검색 결과 없음, 첫 데이터 생성 유도, 권한 없음 같은 상황에 쓴다.
활용 방법
첫 데이터 유도
아이콘·제목·설명에 더해 action으로 다음 행동을 제시한다.
Preview
아직 노트가 없다
첫 노트를 만들면 이 자리에 최근 기록이 쌓인다.
tsx
<EmptyState icon={<Inbox size={24} />} title="아직 노트가 없다" description="첫 노트를 만들면 이 자리에 최근 기록이 쌓인다." action={<Button variant="primary">노트 추가</Button>} />
검색 결과 없음
action 없이 상황만 알린다.
Preview
검색 결과가 없다
다른 키워드로 다시 찾아본다.
tsx
<EmptyState icon={<SearchX size={24} />} title="검색 결과가 없다" description="다른 키워드로 다시 찾아본다." />
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| icon | ReactNode | - | 상단 아이콘 |
| title | ReactNode | - | 제목 |
| description | ReactNode | - | 보조 설명 |
| action | ReactNode | - | 다음 행동 버튼 |