EmptyState

@hua-labs/ui/feedback

v1.0.0

A component for displaying empty states with icon, message, and optional action. Perfect for when there's no data to show or guiding users to take action.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { EmptyState } from "@hua-labs/ui/feedback";

고급/Pro 컴포넌트는 @hua-labs/ui/advanced에서 제공됩니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 사용법

데이터가 없습니다

항목을 추가하여 시작해보세요.

액션 버튼 포함

프로젝트가 없습니다

첫 번째 프로젝트를 만들어 시작하세요.

변형

정보 없음

주의 필요

오류가 발생했습니다

완료

크기

size="sm"

검색 결과가 없습니다

size="md" (default)

검색 결과가 없습니다

size="lg"

검색 결과가 없습니다

Props

이름	타입	기본값	설명
`icon`	`IconName \| React.ReactNode`	`"inbox"`	Icon to display. Can be an icon name string or custom React node
`title*`	`string`	-	Main title text
`description`	`string`	-	Description text below the title
`actionText`	`string`	-	Text for the action button
`actionHref`	`string`	-	URL for the action button (renders as link)
`actionOnClick`	`() => void`	-
`variant`	`"default" \| "warning" \| "info" \| "error" \| "success"`	`"default"`	시각적 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the empty state
`dot`	`string`	-

코드 예시

기본 사용법

Example1.tsxtsx

import { EmptyState } from "@hua-labs/ui/feedback";

export function BasicEmptyState() {
  return (
    <EmptyState
      icon="inbox"
      title="No data to display"
      description="Try adding some items to get started."
    />
  );
}

액션 버튼 포함

Example2.tsxtsx

import { EmptyState } from "@hua-labs/ui/feedback";

export function EmptyStateWithAction() {
  return (
    <EmptyState
      icon="plus"
      title="No projects yet"
      description="Create your first project to get started."
      actionText="Create Project"
      actionOnClick={() => console.log("Create!")}
    />
  );
}

변형

Example3.tsxtsx

import { EmptyState } from "@hua-labs/ui/feedback";

export function EmptyStateVariants() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
      <EmptyState icon="info" title="No information" variant="info" />
      <EmptyState
        icon="warning"
        title="Warning"
        description="This requires attention"
        variant="warning"
      />
      <EmptyState icon="x" title="Error occurred" variant="error" />
      <EmptyState icon="check" title="All done" variant="success" />
    </div>
  );
}

접근성

•시맨틱 구조: 제목은 heading 요소, 설명은 paragraph 요소로 렌더링
•액션 레이블링: 액션 버튼에 스크린 리더용 aria-label 포함
•색상 대비: 모든 변형에서 WCAG 2.1 AA 색상 대비 기준 충족

LoadingSpinner ThemeToggle