Empty state

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

보여줄 것이 없는 이유를 설명하고 가능한 다음 단계를 제시하세요. 첫 사용, 검색 결과 없음, 권한 부족을 구분하세요. 다른 콘텐츠가 있으면 화면 전체를 대체하지 말고 관련 영역에 상태를 보여주세요.

오류를 빈 성공 상태로 제시하지 마세요. 대신 InlineMessage를 사용하세요. 권한이 없는 것을 만들도록 유도하지 마세요. 수행할 수 없는 액션을 기본 버튼으로 만들지 마세요. 대신 권한 안내를 제공하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root → optional decorative Icon + Title(h3) + Description + Actions

키보드와 접근성

포커스를 받거나 라이브 영역을 만들지 않습니다. Title.level을 주변 제목 위계에 맞게 설정하세요. 검색 지우기, 항목 만들기, 권한 안내를 명확히 이름 붙인 버튼이나 링크로 제공하세요.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { EmptyState, Button } from '@surflane/ui'

<EmptyState.Root>
  <EmptyState.Title>No matching environments</EmptyState.Title>
  <EmptyState.Description>
    Try another name or clear the filters.
  </EmptyState.Description>
  <EmptyState.Actions>
    <Button onClick={clearFilters}>Clear filters</Button>
  </EmptyState.Actions>
</EmptyState.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰