빈 상태

데이터가 없을 때 그 이유와 다음 행동을 안내하는 플레이스홀더다. 검색 결과 없음, 첫 데이터 생성 유도, 권한 없음 같은 빈 화면을 채운다.

활용 방법

icon·title·description·action을 조합해 비어 있는 이유와 이어질 행동을 함께 준다.

Preview

로그 없음

선택한 필터에 맞는 로그가 없다. 조건을 넓혀 다시 검색한다.

tsx

<EmptyState icon={<Inbox size={24} />} title="로그 없음" description="선택한 필터에 맞는 로그가 없다." action={<Button variant="primary">필터 초기화</Button>} />