Status Label
작은 색상 사각형과 짧은 텍스트로 실제 개체 상태를 나타냅니다.
- 성숙도
- 후보
- 소스 경로
components/ui/status-label.tsx- 소스
- 소스
실제 미리보기
초안검토 중발행됨확인 필요발행 실패
사용할 때
사용 기준
문서나 미디어의 발행·처리 상태처럼 정적인 메타데이터에 씁니다.
사용하지 않을 때
클릭 동작, 필터, 긴 설명이나 실시간 오류를 대신하지 않습니다.
변형과 상태
neutral고정 예시초안 같은 중립 상태를 짧은 문구로 표시합니다.
초안info고정 예시처리 중 상태를 정보 문구와 함께 표시합니다.
검토 중success고정 예시완료 상태를 구체적인 텍스트로 표시합니다.
발행됨warning고정 예시확인이 필요한 상태를 문구로 설명합니다.
확인 필요error고정 예시실패 상태를 오류 원인과 혼동하지 않게 짧게 표시합니다.
발행 실패
접근성
색이 없어도 뜻이 분명한 텍스트를 반드시 제공합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
tone | "neutral" | "info" | "success" | "warning" | "error" | 아니요 | 상태 사각형의 의미 색상입니다. |
variant | "neutral" | "info" | "success" | "warning" | "error" | 아니요 | 한 번의 호환 기간 동안 유지되는 별칭입니다. |
children | ReactNode | 예 | 상태를 직접 설명하는 짧은 문구입니다. |
사용 예시
지원 importimport { StatusLabel } from "@/components/ui/status-label"
<StatusLabel tone="success">Published</StatusLabel>