Badge - OLUN. Design System

variant: status(dot 자동) · semantic · neutral · brand · pill
tone: neutral · success · warning · danger · info · accent
크기: xs(18px) · sm(22px) · md(24px)
정적 라벨: 읽기 전용 분류나 속성 라벨은 Badge variant=pill로 표현합니다.
상태와 구분: 분류, 속성, 수량은 Badge를 사용합니다. 객체의 생명주기나 처리 결과 상태는 StatusBadge를 사용합니다.
접근성: 색+텍스트 조합 필수 — 색만으로 상태 전달 금지

기본

상태·브랜드·분류 레이블 — 표면은 중립, 색은 점만

중립진행 중대기오류검토OLUN

코드 보기tsx

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

// 단일 tone 축: 표면은 항상 중립(--bg-surface), 의미색은 leading dot만 carry.
export function BadgeBasic() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
      <Badge>중립</Badge>
      <Badge tone="success">진행 중</Badge>
      <Badge tone="warning">대기</Badge>
      <Badge tone="error">오류</Badge>
      <Badge tone="info">검토</Badge>
      <Badge tone="brand">OLUN</Badge>
    </div>
  );
}

의미 색조

상태 의미에 맞춰 tone 선택 (점 색만 변경)

제출 완료검토 필요기한 초과진행 중대기

코드 보기tsx

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

export function BadgeTones() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
      <Badge tone="success">제출 완료</Badge>
      <Badge tone="warning">검토 필요</Badge>
      <Badge tone="error">기한 초과</Badge>
      <Badge tone="info">진행 중</Badge>
      <Badge tone="neutral">대기</Badge>
    </div>
  );
}

상태 dot

상태 텍스트 + 점 — 표면 tint 없이 dot만으로 의미 전달

활성보류중단검토 중

코드 보기tsx

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

export function BadgeStatusDot() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
      <Badge tone="success">활성</Badge>
      <Badge tone="warning">보류</Badge>
      <Badge tone="error">중단</Badge>
      <Badge tone="info">검토 중</Badge>
    </div>
  );
}

브랜드·분류

brand tone은 lime 점, 그 외 분류는 neutral

OLUN심장학

코드 보기tsx

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

export function BadgeBrand() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
      <Badge tone="brand">OLUN</Badge>
      <Badge tone="neutral">심장학</Badge>
    </div>
  );
}