EmptyState

목록·검색 결과가 비었을 때 섹션 안에 넣는 안내 블록이에요.

사용법

EmptyState는 검색·목록이 비었을 때 섹션 안에 넣는 안내 블록이에요. Result보다 가볍게 쓰기 좋아요.

등록된 상품이 없어요

첫 상품을 등록하면 여기에 목록이 표시돼요.

스타일 커스터마이징

EmptyState 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<EmptyState
  className="shadow-md"
  style={{
    --gtd-component-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<EmptyState
  classNames={{
    icon: "my-empty-state-icon",
    title: "my-empty-state-title",
    desc: "my-empty-state-desc",
    action: "my-empty-state-action"
  }}
/>

CSS 변수

변수	설명

인터페이스

EmptyStateProps

속성	타입	기본값	설명
title*	string	—	안내 제목
description	string	—	보조 설명
icon	ReactNode	—	아이콘 슬롯
action	ReactNode	—	CTA 슬롯
size	"sm" \| "md"	md	패딩·타이포 크기
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { EmptyState } from "@/components/ui/EmptyState";