Empty State
표시할 내용이 없을 때 이유와 다음 행동을 안내합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/empty-state.tsx- 소스
- 소스
실제 미리보기
표시할 문서가 없습니다
조건을 바꾸거나 새 문서를 만들 수 있습니다.
사용할 때
사용 기준
검색 결과, 문서, 목록이 비어 있는 실제 상태에 씁니다.
사용하지 않을 때
예시 데이터를 꾸며 빈 공간을 채우거나 일반 홍보 영역으로 쓰지 않습니다.
변형과 상태
default고정 예시제목과 설명이 원인을 구체적으로 말하는지 확인합니다.
표시할 문서가 없습니다
조건을 바꾸거나 새 문서를 만들 수 있습니다.
action고정 예시가능한 다음 행동이 하나의 명확한 버튼으로 제공되는지 확인합니다.
표시할 문서가 없습니다
조건을 바꾸거나 새 문서를 만들 수 있습니다.
접근성
제목과 설명만으로 상태를 이해할 수 있고 가능할 때 복구 동작을 제공합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
title | ReactNode | 예 | 빈 상태를 요약하는 제목입니다. |
description | ReactNode | 예 | 이유나 다음 단계를 설명합니다. |
action | ReactNode | 아니요 | 복구나 생성으로 이어지는 동작입니다. |
사용 예시
지원 importimport { EmptyState } from "@/components/ui/empty-state"
<EmptyState
title="No documents"
description="Create the first document."
action={<Button>Create</Button>}
/>