빈 상태

데이터가 없을 때 이유와 다음 행동을 함께 안내하는 정적 표시다. 검색 결과 없음, 첫 데이터 생성 유도, 권한 없음 같은 상태에 쓴다.

활용 방법

icon·title·description으로 상황과 대안을 안내한다.

Preview

검색 결과가 없습니다

다른 검색어나 필터로 다시 시도한다.

tsx

<EmptyState icon={<SearchX size={24} />} title="검색 결과가 없습니다" description="..." />

action에 primary 버튼을 넣어 생성 흐름으로 연결한다.

Preview

등록된 계약이 없습니다

첫 계약을 추가하면 여기에 표시된다.

tsx

<EmptyState icon={<Inbox size={24} />} title="등록된 계약이 없습니다" action={<Button variant="primary">계약 추가</Button>} />