EmptyState
무엇이 없는지와 다음에 할 행동 하나를 보여 줘요. 기본은 캐릭터 일러스트예요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
API 키가 없어요
키를 만들면 여기에서 사용량을 볼 수 있어요.
API 키가 없어요
키를 만들면 여기에서 사용량을 볼 수 있어요.
사용법
- 좁은 곳은 iconPopover, Select 안처럼 공간이 작으면 아이콘을 넘겨요.
- 높이 확인일러스트가 있으면 정상 화면보다 높아질 수 있어요. 4가지 상태를 그릴 때 함께 확인해요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| title | 무엇이 없는지 (필수) | — |
| description | 설명 | — |
| action | 다음 행동 하나 (보통 primary Button) | — |
| icon | 넘기면 일러스트 대신 아이콘 원 | 일러스트 |
코드
tsx
<EmptyState title="API 키가 없어요" description="키를 만들면 여기에서 사용량을 볼 수 있어요." action={<Button>API 키 만들기</Button>} />
<EmptyState icon={<Inbox />} title="결과가 없어요" />