EmptyState

한눈에#

리스트·테이블·검색 결과가 비었을 때 “왜 비었는지 + 다음에 뭘 할지”를 한 자리에서 안내합니다 — icon·title·description·action 4슬롯의 중앙 정렬 레이아웃입니다.

검색 결과가 없습니다

다른 검색어로 다시 시도하거나, 필터를 초기화해 보세요.

필터 초기화

• icon·title·desc·action 4슬롯
• 일러스트 슬롯
• 중앙 정렬 유동
• RSC

아이콘 원형 장식 + 제목 + 설명 + 행동 슬롯으로 다음 단계를 제시합니다

사용 시점#

데이터가 비어 다음 단계를 안내해야 하면 EmptyState — 로딩 중이거나 오류 복구면 다른 컴포넌트입니다.

Empty State 일러스트 (Track B 5-2 · 프리뷰)#

빈상태에 쓰는 스팟 일러스트 세트 — 그라데이션·그림자로 깊이를 주는 블루 카드/씬 스타일입니다. 일러스트 자산을 코드젠해 @wds/ui-web의 BloomSpot 컴포넌트로 제공합니다. 단일 버전(자체 backdrop을 가진 씬)이라 라이트·다크 양 테마에서 동일 자산을 노출합니다. 기본은 장식 용도(스크린리더 건너뜀)이고, label을 주면 role=img로 의미를 전달합니다.

8종 변형: search(검색 결과 없음)·noData(데이터 없음)·forms(폼 없음)·sheet(시트 없음)· questions(질문 없음)·groups(그룹 없음)·library(라이브러리 비었음)·tasks(할 일 없음). EmptyState는 전용 illustration 슬롯을 얻어, 아이콘 원형 대신 자체 프레임의 일러스트를 더 크게 렌더합니다(아래 맥락 프리뷰는 illustration={<BloomSpot variant="search" />}).

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

EmptyState를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기→

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

변형#

슬롯 조합으로 밀도를 조절합니다 — title만 필수입니다.

아직 프로젝트가 없습니다

조건에 맞는 에이전트가 없습니다

상태 필터를 넓히면 더 많은 결과를 볼 수 있습니다.

크기#

size prop이 없습니다 — 부모 폭을 채우고 콘텐츠를 중앙 정렬하는 유동 레이아웃입니다. 아이콘 원형은 48px(space.12) 고정, 설명은 최대 28rem으로 줄 길이를 제한합니다.

상태#

정적 컴포넌트라 인터랙션 상태가 없습니다(RSC). 행동은 action 슬롯에 넘긴 Button/TextLink가 소유합니다.

Props#

접근성#

• 아이콘 원형은 장식(aria-hidden) — 정보는 title/description 텍스트가 전달합니다
• title은 p 요소입니다 — 페이지 구조상 헤딩이 필요하면 title 슬롯에 <h2> 등을 직접 넘기세요 (ReactNode 슬롯)
• 행동은 action 슬롯의 실제 버튼/링크가 제공합니다 — 키보드 경로는 슬롯 컴포넌트(Button 등)가 보장합니다
• 빈 상태 도착을 알릴 필요가 있으면(검색 직후 등) 호출부에서 라이브 리전을 구성하세요 — 컴포넌트 자체는 정적입니다

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).