Skip to Content
ComponentsFoundationEmpty

Empty

데이터가 없는 상태를 사용자에게 안내하는 Empty State 컴포넌트

개요

Foundation Empty는 데이터가 없거나 로딩 실패 등의 상태를 시각적으로 안내하기 위한 Composable UI 컴포넌트입니다. 아이콘, 제목, 설명, 액션 버튼 등을 조합하여 다양한 Empty State를 구성할 수 있습니다.

주요 특징

  • ✅ 아이콘 표시: 상태를 시각적으로 표현하는 아이콘 영역
  • ✅ 텍스트 메시지 표시: 제목/설명 형태의 텍스트 표시
  • ✅ 액션 버튼 표시: CTA 버튼(다시 시도, 등록 등) 표시
  • ✅ Composable 구조: 필요한 요소만 조합하여 구성
  • ✅ 아이콘 Variant: 기본/배경 있는 아이콘 스타일
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

사용 예시

기본 Empty State

아이콘, 제목, 설명으로 구성된 기본 Empty State입니다.

아이콘 배경 Variant

EmptyMedia의 variant=“icon”으로 배경이 있는 아이콘 스타일을 적용합니다.

액션 버튼 포함

EmptyContent 영역에 CTA 버튼을 배치할 수 있습니다.

API Reference

컴포넌트 구조

컴포넌트HTML 요소Description
Empty<div>최상위 컨테이너
EmptyHeader<div>아이콘 + 제목 + 설명 그룹
EmptyMedia<div>아이콘/이미지 영역
EmptyTitle<div>제목 텍스트
EmptyDescription<div>설명 텍스트
EmptyContent<div>액션 버튼 등 추가 콘텐츠 영역

Empty Props

PropTypeDefaultDescription
classNamestring-추가 CSS 클래스

EmptyMedia Props

PropTypeDefaultDescription
variant"default" | "icon""default"아이콘 스타일 (icon: 배경 + 라운드 박스)

기본 사용법

import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from "@vortex/ui-foundation"
 
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>제목</EmptyTitle>
    <EmptyDescription>설명</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>액션</Button>
  </EmptyContent>
</Empty>

접근성

권장 사항

  • ✅ 의미 있는 아이콘과 텍스트로 빈 상태를 명확히 전달
  • ✅ 액션 버튼이 있는 경우 다음 행동을 명확히 안내
  • ❌ 아이콘만으로 상태를 전달하지 않고 반드시 텍스트 병행

관련 컴포넌트

Last updated on
EditorField