reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/EmptyState

EmptyState

Component

데이터가 없을 때 표시하는 빈 상태 컴포넌트. 아이콘, 제목, 설명, 액션 버튼 지원.

indicator
Related docs
bun add @reopt-ai/opt-ui
100%

빈 결과와 다음 행동

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

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

최근 30일 · Growth plan · Seoul

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

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

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

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

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

간결한 패널 상태

저장된 리포트가 없습니다

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

EmptyState

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

컴포넌트 의존 관계

깊이
▲ USED BY (6)criteria-builderaudit-timelinechat-sidebarchat-message-listquery-output-panemarketplace-catalogEmptyState
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • title을 렌더링한다
  • description을 렌더링한다
  • icon을 렌더링한다
  • 액션 버튼을 렌더링한다
  • 여러 액션 버튼을 지원한다

Blocks that use this component

MarketplaceCatalog

카드 그리드 기반 마켓플레이스 카탈로그. 검색, 탭 필터, 정렬 지원.

Display

Related components

Kbd

키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.

Indicator

StatCard

단일 지표를 값·변화량·보조 설명으로 표시하는 통계 카드. 비교 기준이 없으면 변화량 줄을 렌더하지 않는다.

Indicator

CompositeZone

Composite 기반 2D 키보드 탐색 컨테이너. 화살표 키로 자식 요소 간 이동 가능.

Indicator

Toolbar

툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.

Indicator

Badge

인라인 상태 뱃지. 5가지 색상 변형, 상태 점(dot) 옵션 지원.

Indicator

Spinner

로딩 상태 표시 스피너. 3가지 크기와 장식용 aria-hidden 모드를 지원합니다.

Indicator
PreviousBreadcrumbNextDescriptionList

마켓플레이스

에이전트와 스킬을 찾아보세요

기본 사용

Command Palette를 열려면Ctrl+K를 누르세요

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

의미와 선택 상태를 가진 지표

Selected metric: revenue

로딩과 밀도

Query latency184ms↓ -12ms

기본 사용 (2D 그리드)

A1
A2
A3
B1
B2
B3

포커스 순환 비활성화

1
2
3

기본 사용


포커스 순환

Variants

DefaultInfoSuccessWarningError

With Dot

DefaultInfoSuccessWarningError

Sizes

SmallMedium

Sizes

Small (16px)

Medium (24px)

Large (32px)

Colors