Badge - OLUN. Design System

variant: status(dot 자동) · semantic · neutral · brand · pill
tone: neutral · success · warning · danger · info · accent
크기: xs(18px) · sm(22px) · md(24px)
접근성: 색+텍스트 조합 필수 — 색만으로 상태 전달 금지

기본

정적 (variant · tone 조합 reference)

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

코드 보기tsx

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

// variant=neutral은 기본 메타데이터 배지 — 섹션, 학년, 카운트 등.
// variant=status는 showDot 자동 포함 (상태 텍스트 + 점).
export function BadgeBasic() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
      <Badge>중립</Badge>
      <Badge variant="status" tone="success">진행 중</Badge>
      <Badge variant="status" tone="warning">대기</Badge>
      <Badge variant="status" tone="danger">오류</Badge>
      <Badge variant="status" tone="info">검토</Badge>
      <Badge variant="brand">OLUN</Badge>
      <Badge variant="pill">Cardiology</Badge>
    </div>
  );
}

의미 색조

정적 (semantic tone 4종 + 크기 3종)

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

xs 크기sm 크기md 크기

코드 보기tsx

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

export function BadgeTones() {
  return (
    <div style={{ display: "grid", gap: "12px" }}>
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
        <Badge tone="success">제출 완료</Badge>
        <Badge tone="warning">검토 필요</Badge>
        <Badge tone="danger">기한 초과</Badge>
        <Badge tone="info">진행 중</Badge>
      </div>
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
        <Badge size="xs">xs 크기</Badge>
        <Badge size="sm">sm 크기</Badge>
        <Badge size="md">md 크기</Badge>
      </div>
    </div>
  );
}

상태 dot

정적 (status variant + showDot 자동 · 수동 토글)

활성보류중단검토 중

코드 보기tsx

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

// variant=status는 showDot=true를 기본값으로 자동 적용.
// showDot={false}로 명시하면 텍스트만 표시 (dot 없는 status badge).
export function BadgeStatusDot() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
      <Badge variant="status" tone="success">활성</Badge>
      <Badge variant="status" tone="warning">보류</Badge>
      <Badge variant="status" tone="danger">중단</Badge>
      <Badge variant="status" tone="info" showDot={false}>검토 중</Badge>
    </div>
  );
}

비활성

정적 (disabled 상태 — 색 오버라이드 자동)

비활성 중립비활성 성공비활성 브랜드

코드 보기tsx

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

export function BadgeDisabled() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
      <Badge disabled>비활성 중립</Badge>
      <Badge variant="status" tone="success" disabled>비활성 성공</Badge>
      <Badge variant="brand" disabled>비활성 브랜드</Badge>
    </div>
  );
}