StatusDot - OLUN. Design System

구현: 상태 점과 텍스트는 StatusBadge로, 점만 필요하면 raw span + semantic token으로 표현합니다.
StatusBadge: status: active · archived · success · warning · error · info · pending
raw dot: span + var(--success/warning/error/info/text-tertiary) — 항상 인접 텍스트 필수
접근성: dot은 aria-hidden, 텍스트 레이블로 상태 전달 (색만 금지)

상태 배지 (StatusBadge)

정적 (StatusBadge 데모)

활성대기주의오류정보보관됨

코드 보기tsx

import { StatusBadge } from "@olundot/ui";

// 상태 점과 텍스트를 함께 표시할 때는 StatusBadge를 사용합니다.
// showDot=true (기본값) → dot 자동 포함. showDot=false → 텍스트만.
export function StatusDotBadge() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
      <StatusBadge status="active">활성</StatusBadge>
      <StatusBadge status="pending">대기</StatusBadge>
      <StatusBadge status="warning">주의</StatusBadge>
      <StatusBadge status="error">오류</StatusBadge>
      <StatusBadge status="info">정보</StatusBadge>
      <StatusBadge status="archived">보관됨</StatusBadge>
    </div>
  );
}

dot 전용 (raw span)

정적 (raw span + semantic token 데모)

연결됨

주의

단절

동기화 중

오프라인

코드 보기tsx

// 점만 필요하고 텍스트 레이블을 옆에 직접 배치할 때 사용합니다.
// 항상 인접 텍스트와 함께 표시합니다 (색만으로 상태 전달 금지).
export function StatusDotRaw() {
  const dots = [
    { color: "var(--success)", label: "연결됨" },
    { color: "var(--warning)", label: "주의" },
    { color: "var(--error)", label: "단절" },
    { color: "var(--info)", label: "동기화 중" },
    { color: "var(--text-tertiary)", label: "오프라인" },
  ];
  return (
    <div style={{ display: "grid", gap: "10px" }}>
      {dots.map(({ color, label }) => (
        <div key={label} style={{ display: "flex", alignItems: "center", gap: "8px" }}>
          <span
            aria-hidden="true"
            style={{
              display: "inline-block",
              width: "8px",
              height: "8px",
              borderRadius: "50%",
              backgroundColor: color,
              flexShrink: 0,
            }}
          />
          <span style={{ fontSize: "0.875rem", color: "var(--text-secondary)" }}>{label}</span>
        </div>
      ))}
    </div>
  );
}

StatusBadge 크기

정적 (xs · sm · md 3종)

xssmmd

코드 보기tsx

import { StatusBadge } from "@olundot/ui";

export function StatusDotSizes() {
  return (
    <div style={{ display: "flex", gap: "12px", alignItems: "center", flexWrap: "wrap" }}>
      <StatusBadge status="active" size="xs">xs</StatusBadge>
      <StatusBadge status="active" size="sm">sm</StatusBadge>
      <StatusBadge status="active" size="md">md</StatusBadge>
    </div>
  );
}