EmptyState - OLUN. Design System

필수 props: `title`은 비콘텐츠 상태의 핵심 메시지입니다.
description: 다음에 가능한 행동이나 상태 원인을 한 문장으로 설명합니다.
action: 복구 가능한 상태에는 하나의 명확한 action을 제공합니다.
bordered: 기본은 테두리 없음입니다. 독립 패널로 세울 때만 `bordered`로 테두리와 배경을 켭니다.

결과 없음

필터나 검색 결과가 없을 때

조건에 맞는 결과가 없습니다

검색어를 줄이거나 필터를 해제해 다시 확인하세요.

최근 30일 데이터 기준

코드 보기tsx

import { Search } from "lucide-react";
import { EmptyState } from "@olundot/ui";

export function EmptyStateNoResults() {
  return (
    <EmptyState
      bordered
      icon={Search}
      title="조건에 맞는 결과가 없습니다"
      description="검색어를 줄이거나 필터를 해제해 다시 확인하세요."
      hint="최근 30일 데이터 기준"
      tone="muted"
    />
  );
}

컨테이너 안 배치

이미 테두리가 있는 표면 안에서는 bordered=false

조건에 맞는 행이 없습니다

필터를 줄이거나 검색어를 다시 입력하세요.

코드 보기tsx

import { Search } from "lucide-react";
import { EmptyState } from "@olundot/ui";

export function EmptyStateBorderless() {
  return (
    <div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-[var(--space-8)]">
      <EmptyState
        bordered={false}
        icon={Search}
        title="조건에 맞는 행이 없습니다"
        description="필터를 줄이거나 검색어를 다시 입력하세요."
      />
    </div>
  );
}

선택 전

목록에서 항목을 선택해야 하는 초기 상태

항목을 선택하세요

왼쪽 목록에서 항목을 선택하면 상세 정보가 표시됩니다.

코드 보기tsx

import { MousePointer2 } from "lucide-react";
import { EmptyState } from "@olundot/ui";

export function EmptyStateSelectionEmpty() {
  return (
    <EmptyState surface="canvas"
      bordered
      icon={MousePointer2}
      title="항목을 선택하세요"
      description="왼쪽 목록에서 항목을 선택하면 상세 정보가 표시됩니다."
      size="sm"
    />
  );
}

준비 중

콘텐츠가 아직 준비되지 않은 자리 표시

아직 준비 중입니다

필수 데이터가 도착하면 이 영역에 내용이 표시됩니다.

코드 보기tsx

import { Clock } from "lucide-react";
import { EmptyState } from "@olundot/ui";

export function EmptyStateReadyPlaceholder() {
  return (
    <EmptyState
      bordered
      icon={Clock}
      title="아직 준비 중입니다"
      description="필수 데이터가 도착하면 이 영역에 내용이 표시됩니다."
      tone="raised"
      size="lg"
    />
  );
}

복구 action

실행 가능한 상태에는 하나의 명확한 action 제공

아직 항목이 없습니다

첫 항목을 추가하면 이 영역에서 상태와 최근 변경 사항을 확인할 수 있습니다.

코드 보기tsx

import { Plus } from "lucide-react";
import { Button, EmptyState } from "@olundot/ui";

export function EmptyStateAction() {
  return (
    <EmptyState surface="canvas"
      bordered
      icon={Plus}
      title="아직 항목이 없습니다"
      description="첫 항목을 추가하면 이 영역에서 상태와 최근 변경 사항을 확인할 수 있습니다."
      action={<Button size="sm">항목 추가</Button>}
    />
  );
}