StepBadge
위저드 단계 번호 원형 배지 — active면 채운 강조 + aria-current="step". 상태는 색만이 아니라 번호와 aria로도 전달돼 색맹에 안전합니다. 잉크는 primary-strong(7.3:1)로 AA.
마지막 업데이트 2026-06-26
한눈에#
설정·위저드의 단계 번호를 원형 배지로 찍는 표시 프리미티브입니다 — 현재 단계는 active로 채워 강조하고, 그 강조는 색뿐 아니라 번호와 aria-current="step"로도 전달됩니다.
- 번호 원형 배지
- active 강조
- aria-current="step"
- primary-strong 7.3:1 AA
현재 단계는 채운 강조(primary-strong) — 색맹에 안전하도록 번호·aria로도 상태를 전달합니다
사용 시점#
번호로 단계를 표식할 때만 StepBadge — 진행 인디케이터 전체나 상태 칩은 다른 컴포넌트입니다.
권장 — 이렇게 쓰세요
지양 — 이러지 마세요
쓴다 — 설정·위저드 섹션 제목 앞에서 '단계 N' 번호를 표식(현재 단계 active)
대신 Stepper — 단계 전체 진행을 잇는 인디케이터(내비)가 필요하면
대신 Badge — 상태·개수 표식이면(단계 번호가 아님)
변형·상태#
기본은 surface 배경 + 외곽선의 차분한 번호이고, active는 primary-strong으로 채워 현재 단계를 끌어올립니다. 잉크는 채운 배경 위에서 on-primary로 AA를 지킵니다(primary-strong 7.3:1).
플레이그라운드#
StepBadge를 직접 조작해 보세요
속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.
플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.
Props#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
step | number | — | 단계 번호 |
active | boolean | false | 현재(활성) 단계면 강조 + aria-current="step" |
ref | Ref<HTMLSpanElement> | — |
접근성#
- 현재 단계는 색 + 채움 + 번호 +
aria-current="step"네 채널로 전달합니다 — 색만으로 상태를 구분하지 않습니다(색맹 안전) active일 때만aria-current="step"이 붙어 보조기술이 현재 단계를 보고합니다- 채운 배지의 잉크는
on-primary—primary-strong(7.3:1) 위에서 AA를 빌드 게이트로 보장합니다(primary가 아니라primary-strong을 잉크 배경으로 쓰는 이유) - 번호 자체가 텍스트라 단계 정보가 시각·보조기술 모두에 노출됩니다
토큰#
component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).
| 속성 | 토큰 |
|---|---|
| 기본 배경/외곽선/잉크 | color.surface · color.border-strong · color.text-muted |
| active 배경/외곽선/잉크 | color.primary-strong · color.primary-strong · color.on-primary |
| 크기 | space.6 정원(원형) |
| 형태 | radius.full |
| 타이포 | font-size.caption + font-weight.medium |