EmptyState

Component

Explain an empty view with an icon, title, description, and action button.

indicator

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { EmptyState } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

빈 결과와 다음 행동

조건에 맞는 고객이 없습니다

현재 세그먼트의 조건이 너무 좁을 수 있습니다.

최근 30일 · Growth plan · Seoul

팁: 검색어를 제거하면 다른 필터는 그대로 유지됩니다.

Last action: 아직 실행한 작업이 없습니다.

실패 상태는 빈 상태와 다르게

이벤트를 불러오지 못했습니다

원본 데이터는 안전합니다. 연결을 확인한 뒤 다시 시도하세요.

간결한 패널 상태

저장된 리포트가 없습니다

자주 확인하는 분석을 저장하면 여기에 모입니다.

EmptyState

Prop	Type	Default	Description
titleRequired	string	—	빈 상태 제목
description	string	—	빈 상태 설명
icon	ReactNode	—	표시할 아이콘
actions	EmptyStateAction[] \| ReactNode	—	액션 버튼 배열 { label, onClick, variant? } 또는 직접 렌더할 노드
body	ReactNode	—	description 대신 넣는 리치 본문 (문단·목록·코드 스니펫)
footer	ReactNode	—	구분선 아래 보조 콘텐츠. 문서 링크·단축키 안내 등
layout	"vertical" \| "horizontal"	"vertical"	horizontal은 아이콘을 텍스트 옆으로 옮긴다 (전체 페이지용)
titleSize	"sm" \| "md" \| "lg"	"md"	제목 시각 크기. headingLevel과 독립
hasBorder	boolean	false	테두리 있는 패널로 렌더
tone	"default" \| "subdued" \| "error"	"default"	error는 실패를 알리고 role=alert로 렌더. subdued는 아직 데이터가 없음을 뜻한다
iconSize	"sm" \| "md" \| "lg"	"md"	아이콘 크기 프리셋
headingLevel	"h2" \| "h3" \| "h4"	"h3"	문서 구조상 제목 레벨

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일5/5 통과

5성공

0실패

5전체

title을 렌더링한다
description을 렌더링한다
icon을 렌더링한다
액션 버튼을 렌더링한다
여러 액션 버튼을 지원한다

Blocks that use this component

MarketplaceCatalog

Blocks

Browse a marketplace card grid with search, tab filters, and sorting.

Related components

Kbd

Core

Display keyboard shortcuts as inline key badges.

StatCard

Core

Show a metric with its value, change, and supporting description. Omit the change row when no comparison is available.

CompositeZone

Core

Navigate child elements in two dimensions with arrow keys using a Composite container.

Toolbar

Core

Group actions in a toolbar with buttons, separators, and tooltips.

Badge

Core

Display inline status badges with five color variants and an optional status dot.

Spinner

Core

Indicate loading in three sizes, with an aria-hidden mode for decorative use.

EmptyState

Component

Explain an empty view with an icon, title, description, and action button.

indicator

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { EmptyState } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

빈 결과와 다음 행동

조건에 맞는 고객이 없습니다

현재 세그먼트의 조건이 너무 좁을 수 있습니다.

최근 30일 · Growth plan · Seoul

팁: 검색어를 제거하면 다른 필터는 그대로 유지됩니다.

Last action: 아직 실행한 작업이 없습니다.

실패 상태는 빈 상태와 다르게

이벤트를 불러오지 못했습니다

원본 데이터는 안전합니다. 연결을 확인한 뒤 다시 시도하세요.

간결한 패널 상태

저장된 리포트가 없습니다

자주 확인하는 분석을 저장하면 여기에 모입니다.

EmptyState

Prop	Type	Default	Description
titleRequired	string	—	빈 상태 제목
description	string	—	빈 상태 설명
icon	ReactNode	—	표시할 아이콘
actions	EmptyStateAction[] \| ReactNode	—	액션 버튼 배열 { label, onClick, variant? } 또는 직접 렌더할 노드
body	ReactNode	—	description 대신 넣는 리치 본문 (문단·목록·코드 스니펫)
footer	ReactNode	—	구분선 아래 보조 콘텐츠. 문서 링크·단축키 안내 등
layout	"vertical" \| "horizontal"	"vertical"	horizontal은 아이콘을 텍스트 옆으로 옮긴다 (전체 페이지용)
titleSize	"sm" \| "md" \| "lg"	"md"	제목 시각 크기. headingLevel과 독립
hasBorder	boolean	false	테두리 있는 패널로 렌더
tone	"default" \| "subdued" \| "error"	"default"	error는 실패를 알리고 role=alert로 렌더. subdued는 아직 데이터가 없음을 뜻한다
iconSize	"sm" \| "md" \| "lg"	"md"	아이콘 크기 프리셋
headingLevel	"h2" \| "h3" \| "h4"	"h3"	문서 구조상 제목 레벨