Empty
빈 상태를 표시할 수 있는 컴포넌트입니다.
import { Empty } from 'sud-ui';사용할 때
빈 상태를 표시할 때
사용예제
No Data
Basic Usage
기본적인 사용 방법입니다.
No Data
Icon Customization
빈 상태에 표시할 아이콘을 지정할 수 있습니다.
Not Found Data
Description Customization
빈 상태에 표시할 텍스트와 스타일을 지정할 수 있습니다.
사용 방법
컴포넌트의 props를 설정하는 방법입니다.
| icon | 커스텀 아이콘 (ReactElement) | ReactElement | - |
| iconSize | 아이콘 크기 | string | number | 30 |
| iconColor | 아이콘 색상(palette값 또는 HEX code) | string | neutral-6 |
| description | 빈 상태에 표시할 텍스트 | ReactNode | "No Data" |
| pretendard | Pretendard 폰트 스타일 | T | EL | L | R | M | SB | B | Black | R |
| gmarket | Gmarket 폰트 스타일 | Light | Medium | Bold | - |
| suite | Suite 폰트 스타일 | L | R | M | SM | B | EB | H | - |
| fontFamily | 커스텀 폰트 패밀리 | string | - |
| size | 텍스트 크기 | xs | sm | base | lg | xl | 2xl | 3xl | 4xl | base |
| weight | 텍스트 굵기 | light | normal | medium | semibold | bold | normal |
| as | HTML 태그 | string | span |
| color | 텍스트 색상(palette값 또는 HEX code) | string | neutral-8 |
| style | 컨테이너에 적용할 추가 스타일 | CSSProperties | {} |
| className | 컨테이너에 적용할 추가 클래스명 | string | "" |