StatusBadge - OLUN. Design System

Badge와 차이: Badge는 분류·속성·수량 라벨이고, StatusBadge는 객체나 프로세스의 상태 vocabulary를 닫아주는 래퍼입니다.
status: active · archived · success · warning · error · info · pending
size: xs · sm · md
live/static: 현재 활성 상태는 기본 pulse를 사용할 수 있고, 이력·완료·보관 상태는 pulse=false로 고정합니다.

Lifecycle

현재 상태 vocabulary를 닫아서 표시

활성대기보관됨

코드 보기tsx

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

export function StatusBadgeLifecycle() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
      <StatusBadge status="active">활성</StatusBadge>
      <StatusBadge status="pending" pulse={false}>대기</StatusBadge>
      <StatusBadge status="archived" pulse={false}>보관됨</StatusBadge>
    </div>
  );
}

Outcome

완료, 주의, 오류, 정보성 결과 상태

완료검토 필요반려검토

코드 보기tsx

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

export function StatusBadgeOutcome() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
      <StatusBadge status="success" pulse={false}>완료</StatusBadge>
      <StatusBadge status="warning" pulse={false}>검토 필요</StatusBadge>
      <StatusBadge status="error" pulse={false}>반려</StatusBadge>
      <StatusBadge status="info" pulse={false}>검토</StatusBadge>
    </div>
  );
}

Live vs static

현재 상태는 live cue, 이력 상태는 pulse=false

현재 활성2026-06-01 제출 완료2026-05-12 보관

코드 보기tsx

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

export function StatusBadgeLiveStatic() {
  return (
    <div style={{ display: "grid", gap: "10px" }}>
      <StatusBadge status="active">현재 활성</StatusBadge>
      <StatusBadge status="success" pulse={false}>2026-06-01 제출 완료</StatusBadge>
      <StatusBadge status="archived" pulse={false}>2026-05-12 보관</StatusBadge>
    </div>
  );
}

dot 숨김

공간이 좁을 때 같은 status vocabulary를 텍스트만으로 표시

완료검토 필요보관됨

코드 보기tsx

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

export function StatusBadgeTextOnly() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
      <StatusBadge status="success" showDot={false}>완료</StatusBadge>
      <StatusBadge status="warning" showDot={false}>검토 필요</StatusBadge>
      <StatusBadge status="archived" showDot={false}>보관됨</StatusBadge>
    </div>
  );
}

크기

행 밀도와 표면 크기에 맞춰 xs · sm · md 선택

xssmmd

코드 보기tsx

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

export function StatusBadgeSizes() {
  return (
    <div style={{ display: "flex", gap: "10px", flexWrap: "wrap", alignItems: "center" }}>
      <StatusBadge size="xs" status="info" pulse={false}>xs</StatusBadge>
      <StatusBadge size="sm" status="info" pulse={false}>sm</StatusBadge>
      <StatusBadge size="md" status="info" pulse={false}>md</StatusBadge>
    </div>
  );
}