---
ui_doc_type: component
component_id: status-badge
status: 구현됨
source_evidence:
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_console_overview.dart
    notes: "connection status badge"
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_runners_surface.dart
    notes: "runner status badge"
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_jobs_surface.dart
    notes: "job state badge"
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_executions_surface.dart
    notes: "execution state badge"
---

# Status Badge

Component ID: `status-badge`

Status: `구현됨`

## Source Evidence

| Type | Path | Notes |
|------|------|-------|
| code | `packages/flutter/oto_console/lib/src/oto_console_overview.dart` | connection status badge |
| code | `packages/flutter/oto_console/lib/src/oto_runners_surface.dart` | runner status badge |
| code | `packages/flutter/oto_console/lib/src/oto_jobs_surface.dart` | job state badge |
| code | `packages/flutter/oto_console/lib/src/oto_executions_surface.dart` | execution state badge |

## Purpose

상태를 짧은 uppercase label과 색으로 스캔 가능하게 표시한다.

## Used By

- `overview`: `overview.header`
- `runners`: `runners.runner-list`
- `pipelines`: `pipelines.job-list`
- `executions`: `executions.execution-list`

## Anatomy

- label text
- colored container
- optional dot in overview variant

## Jenkins Reference Alignment

- Jenkins build result icons, node online/offline 상태, controller monitor severity를 OTO badge color/label의 러프 참조로 삼는다.
- 색만으로 의미를 전달하지 않고 uppercase label을 함께 제공한다.
- Jenkins의 success/unstable/failure/aborted 같은 build result vocabulary와 OTO queued/running/succeeded/failed/canceled vocabulary는 1:1로 강제하지 않는다.

## Target Layout Delta

- badge는 entity status와 action result severity를 구분할 수 있게 variant를 명확히 한다.
- build/run status는 Jenkins result semantics에 가까운 success/warning/failure/neutral mapping을 제공한다.
- 현재 surface별 badge 구현은 목표 status variant 반영이 완료되어 `구현됨` 상태다.

## Variants

- connection: checking/online/degraded/offline
- runner: active/online/idle/busy/running/offline
- work item: queued/running/succeeded/failed/canceled

## States

- default
- success
- warning
- failure
- neutral

## Rules

- label은 한 줄로 줄이고 긴 값은 ellipsis 처리한다.
- semantic color는 surface별 mapping과 일치해야 한다.

## Decision History

- 2026-06-24: surface별 private badge 구현을 공통 UI component로 문서화했다.
