EmptyState

EmptyState 컴포넌트는 데이터가 없거나 검색 결과가 비어있는 등 콘텐츠가 없는 상태를 표시하는 데 사용됩니다. 사용자에게 왜 콘텐츠가 없는지 설명하고, 취할 수 있는 다음 단계를 제안하는 액션 버튼을 제공할 수 있습니다.

인터랙티브 예제

아래 컨트롤을 사용하여 EmptyState 컴포넌트의 동작을 직접 테스트해볼 수 있습니다.

데이터가 없습니다

표시할 데이터가 없습니다. 새로운 항목을 추가해보세요.

titlestring

빈 상태 제목을 입력합니다.

descriptionstring

빈 상태 설명을 입력합니다.

buttonsarray

버튼의 속성을 지정합니다.

buttonobject

아이템 편집

labelstring

버튼에 표시될 텍스트

hierarchyselect

버튼의 스타일

sizeselect

버튼의 크기

buttonobject

아이템 편집

labelstring

버튼에 표시될 텍스트

hierarchyselect

버튼의 스타일

sizeselect

버튼의 크기

기본 사용법

import { EmptyState } from '@ncds/ui-admin';

function App() {
  return (
    <EmptyState
      title="데이터가 없습니다"
      description="새로운 항목을 추가해 보세요."
      buttons={{
        label: '항목 추가',
        hierarchy: 'primary',
      }}
    />
  );
}

데이터가 없습니다

새로운 항목을 추가해 보세요.

Props

Prop	Type	Default	Description
title	string	-	상태의 제목을 지정합니다.
description	string	-	상태에 대한 설명 텍스트를 지정합니다.
buttons	'ButtonOptions \| ButtonOptions[]'	-	사용자에게 제공할 액션 버튼을 지정합니다. 단일 버튼 객체 또는 버튼 객체 배열을 사용할 수 있습니다.

ButtonOptions

Prop	Type	Default	Description
label	string	-	버튼에 표시될 텍스트입니다.
hierarchy	'primary' \| 'secondary' \| 'secondary-gray' \| 'tertiary-gray' \| 'tertiary' \| 'link' \| 'destructive'	-	버튼의 스타일 테마를 지정합니다.
size	'xs' \| 'sm' \| 'md' \| 'lg'	-	버튼의 크기를 지정합니다.
onClick	() => void	-	버튼 클릭 시 실행될 함수입니다.
leadingIcon	'IconSlotType \| CustomSlotType'	-	버튼 텍스트 앞에 표시될 아이콘 또는 커스텀 요소입니다.
trailingIcon	'IconSlotType \| CustomSlotType'	-	버튼 텍스트 뒤에 표시될 아이콘 또는 커스텀 요소입니다.
disabled	boolean	false	버튼의 비활성화 여부를 지정합니다.

상세 예제 (Detailed Examples)

버튼 없이 사용

버튼이 필요 없는 경우 buttons prop을 생략하면 됩니다.

검색 결과가 없습니다

다른 검색어로 다시 시도해보세요.

단일 버튼 사용

가장 일반적인 사용 방식으로, 사용자가 취할 수 있는 단일 액션을 제공합니다.

장바구니가 비어있습니다

상품을 장바구니에 추가하고 쇼핑을 계속하세요.

여러 버튼 제공

사용자에게 여러 옵션을 제공해야 할 때 버튼 배열을 사용합니다.

결제 방법이 없습니다

결제를 진행하기 위해 새로운 결제 방법을 추가하세요.

다양한 버튼 스타일 활용

버튼의 hierarchy 속성을 사용하여 다양한 스타일의 버튼을 제공할 수 있습니다.

계정이 일시 정지되었습니다

계정 복구를 위해 관리자에게 문의하거나 다른 계정으로 로그인하세요.

인터랙티브 예제​

기본 사용법​

Props​

ButtonOptions​

상세 예제 (Detailed Examples)​

버튼 없이 사용​

단일 버튼 사용​

여러 버튼 제공​

다양한 버튼 스타일 활용​