빈 상태

결과·데이터가 없을 때 이유와 다음 행동을 안내하는 표시다. 단순히 비었다고 말하는 대신, 왜 비었는지와 사용자가 지금 할 수 있는 일을 함께 보여준다.

활용 방법

필터나 검색어를 조정할 수 있게 안내한다. 보통 action 은 생략한다.

Preview

결과가 없어요

검색어를 바꾸거나 필터를 조정해 보세요

tsx

<EmptyState
  icon={<Search size={24} />}
  title="결과가 없어요"
  description="검색어를 바꾸거나 필터를 조정해 보세요"
/>

데이터가 아직 없고 생성이 다음 행동이면 action 을 넣는다.

Preview

아직 회사가 없어요

첫 회사를 추가해 보세요

tsx

<EmptyState
  icon={<Inbox size={24} />}
  title="아직 회사가 없어요"
  description="첫 회사를 추가해 보세요"
  action={<Button size="sm">회사 추가</Button>}
/>

권한 문제처럼 사용자가 직접 해결하기 어려운 경우는 요청할 대상을 설명한다.

Preview

접근 권한이 없어요

관리자에게 권한 부여를 요청하세요

tsx

<EmptyState
  icon={<ShieldAlert size={24} />}
  title="접근 권한이 없어요"
  description="관리자에게 권한 부여를 요청하세요"
/>