Status

Status (상태)

프로세스나 상태의 상태를 나타내는 컴포넌트예요. 온라인/오프라인 같은 상태를 색상과 아이콘으로 표현할 때 유용해요.

출처: 문서

본문

Status는 프로세스나 상태의 상태를 나타내는 컴포넌트예요. <ExampleTabs name="status-basic" />

사용법 (Usage)

import { Status } from "@chakra-ui/react"

<Status.Root>
  <Status.Indicator />
</Status.Root>

Info: 닫힌(closed) 컴포넌트 구성을 선호한다면 아래 스니펫을 확인해 보세요.

예시 (Examples)

라벨 (Label)

Status.Root 컴포넌트 안에서 라벨을 렌더링할 수 있어요.

크기 (Sizes)

size prop으로 상태 컴포넌트의 크기를 바꿀 수 있어요.

닫힌 컴포넌트 (Closed Component)

닫힌 컴포넌트 구성을 위해 Status를 설정하는 방법이에요. 프로젝트에 자동으로 닫힌 컴포넌트를 추가하고 싶다면 다음 명령을 실행해요.

npx @chakra-ui/cli snippet add status

Props

Status 컴포넌트의 Root 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.