Empty

콘텐츠가 없을 때 표시하는 빈 상태 컴포넌트

Basic Usage

기본 Empty 컴포넌트입니다.

No messages

You have no messages in your inbox. Start a conversation to see messages here.

tsx

<Empty className="border">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Inbox />
    </EmptyMedia>
    <EmptyTitle>No messages</EmptyTitle>
    <EmptyDescription>
      You have no messages in your inbox. Start a conversation to see messages here.
    </EmptyDescription>
  </EmptyHeader>
</Empty>

With Action

액션 버튼을 추가할 수 있습니다.

No files found

There are no files in this folder. Upload files to get started.

tsx

<Empty className="border">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FileX />
    </EmptyMedia>
    <EmptyTitle>No files found</EmptyTitle>
    <EmptyDescription>
      There are no files in this folder. Upload files to get started.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>
      <Plus />
      Upload File
    </Button>
  </EmptyContent>
</Empty>

Search Empty State

검색 결과가 없을 때 사용하는 빈 상태입니다.

No results found

We couldn't find anything matching your search. Try using different keywords.

tsx

<Empty className="border">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Search />
    </EmptyMedia>
    <EmptyTitle>No results found</EmptyTitle>
    <EmptyDescription>
      We couldn't find anything matching your search.
      Try using different keywords.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="outline">Clear search</Button>
  </EmptyContent>
</Empty>

Media Variants

EmptyMedia는 default와 icon 두 가지 variant를 제공합니다.

Default Variant

Larger icon without background

Icon Variant

Smaller icon with background

tsx

{/* Default variant - larger icon without background */}
<EmptyMedia variant="default">
  <Inbox className="size-16 text-muted-foreground" />
</EmptyMedia>

{/* Icon variant - smaller icon with background */}
<EmptyMedia variant="icon">
  <Inbox />
</EmptyMedia>

Usage

tsx

import {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
} from '@gpters-internal/ui';

function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Inbox />
        </EmptyMedia>
        <EmptyTitle>No items</EmptyTitle>
        <EmptyDescription>
          There are no items to display.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Add Item</Button>
      </EmptyContent>
    </Empty>
  );
}