ErrorState
카드나 목록 하나를 불러오지 못했을 때 무엇이 실패했는지와 다시 시도할 방법을 보여 줘요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
불러오지 못했어요
네트워크 연결을 확인하고 다시 시도해 주세요.
불러오지 못했어요
네트워크 연결을 확인하고 다시 시도해 주세요.
사용법
- 사과하지 않아요무엇이 실패했고 어떻게 하면 되는지 써요.
- 페이지 전체 실패는 ErrorPage카드 하나가 실패하면 ErrorState예요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| title · description | 무엇이 실패했고 어떻게 하면 되는지 | — |
| onRetry | 있으면 secondary 다시 시도 버튼 | — |
| retryLabel | 버튼 문구 | 다시 시도 |
| icon | 넘기면 일러스트 대신 아이콘 원 | 일러스트 |
코드
tsx
<ErrorState title="API 키를 불러오지 못했어요" description="네트워크 연결을 확인하고 다시 시도해 주세요." onRetry={refetch} />