StatusLight
먼저 보고, 그다음 계약을 읽습니다
운영자 대시보드용 색 dot(+선택 label/timestamp) — 4-state 색 표준.
Component intent의도와 경계 읽기
PipelineTable·ReporterCard 등이 상태를 색 dot 으로 표시하던 패턴을 SSOT 로 올린 것. variant 색이 AI-first 4-state(성공/경고/위험/대기/실행)를 표준화하며, 별칭(green/amber/red/gray/blue)은 canonical(ok/warning/danger/muted/running)로 접혀 CSS 는 5종만 정의한다. dot 은 currentColor 로 색을 상속하고, label/timestamp 는 optional 이라 단독 dot 으로도 inline row 로도 쓴다. pulse 로 "지금 살아있다"를 강조(주로 running).
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { StatusLight } from "@axe/ui";export function Example() { return ( <> <StatusLight variant="ok" label="정상" /> <StatusLight variant="muted" label="대기" /> </> );}import { StatusLight } from "@axe/ui";<StatusLight variant="running" pulse size="md" label="수집기 실행 중" timestamp="18:00:12"/><span class="axe-status-light axe-status-light--running axe-status-light--size-md axe-status-light--pulse axe-status-light--with-content"> <span class="axe-status-light__dot" aria-hidden="true"></span> <span class="axe-status-light__label">수집기 실행 중</span> <span class="axe-status-light__timestamp">18:00:12</span></span>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
variant | "ok" | "green" | "warning" | "amber" | "danger" | "red" | "muted" | "gray" | "running" | "blue" | — | "muted" | 색/의미. 별칭이 canonical 로 접힘 — green→ok(success) · amber→warning · red→danger · gray→muted(대기) · blue→running(info). |
pulse | boolean | — | — | dot 깜박임(box-shadow ring). "살아있음" 강조용, 주로 running. reduced-motion 시 자동 정적. |
label | React.ReactNode | — | — | dot 옆 라벨. 생략 시 dot only. text-primary·medium. |
timestamp | React.ReactNode | — | — | label 다음 회색 타임스탬프(tabular-nums). ISO 문자열/ReactNode 모두 가능. |
size | "sm" | "md" | "lg" | — | "sm" | dot 크기 — sm 8 · md 10 · lg 12px. label 은 부모 폰트를 따른다. |
...rest | React.HTMLAttributes<HTMLSpanElement> | — | — | className 병합, 나머지는 루트 <span> 으로 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-status-light | stable | 루트 span — inline-flex·baseline 정렬·gap. |
.axe-status-light__dot | stable | 색 dot — currentColor 배경(색은 variant 가 결정). |
.axe-status-light__label | stable | 라벨 — text-primary·medium. |
.axe-status-light__timestamp | stable | 타임스탬프 — text-muted·tabular-nums·xs. |
.axe-status-light--ok | stable | ok(success) — color --success. |
.axe-status-light--warning | stable | warning — color --warning. |
.axe-status-light--danger | stable | danger — color --danger. |
.axe-status-light--muted | stable | muted(대기) — color --text-muted. |
.axe-status-light--running | stable | running — color --info(pulse 권장). |
.axe-status-light--size-sm | stable | dot 8px. |
.axe-status-light--size-md | stable | dot 10px. |
.axe-status-light--size-lg | stable | dot 12px. |
.axe-status-light--pulse | stable | dot 깜박임(box-shadow ring, opacity 유지). |
.axe-status-light--with-content | internal | label/timestamp 존재 시 붙는 마커 — 전용 CSS 규칙 없음. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
dot 은 aria-hidden="true" — 순수 시각. 컴포넌트는 role/aria-live 를 부여하지 않는다.
색만으로는 의미가 SR·색각이상 사용자에게 전달되지 않는다(WCAG 1.4.1). 의미를 노출하려면 label 로 텍스트를 주거나 상위에서 aria-label/aria-live 를 부여한다. prefers-reduced-motion 시 pulse 정지.