Stepper — Hyomin Design System

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/stepper.css" />

Live

Step Variants

Done

STEP1 정보 입력

Current

STEP2 정보 입력

Future

STEP3 정보 입력

Warning

STEP3 정보 입력

Error

STEP3 정보 입력

Specs

상태	배경	테두리	Label 색상	Text 색상
Done	--green-50	--green-200	--green-600	--green-800
Current	#ffffff	--green-600	--green-600	--gray-900
Future	--gray-50	--gray-200	--gray-400	--gray-400
Warning	--yellow-50	--yellow-200	--yellow-300	--yellow-600
Error	--red-50	--red-200	--red-400	--red-700
공통 레이아웃
Padding	--spacing-3 (12px) × --spacing-4 (16px)
Border Radius	--radius-lg (12px)
Gap (label↔text)	--spacing-1 (4px)
Gap (step간)	--spacing-2 (8px)
Label	14px / Regular (--font-size-label)
Text	16px / Medium (--font-size-body-sm)

Code

HTML — 기본 구조

<nav class="stepper" aria-label="진행 단계">
  <div class="step step--done">
    <span class="step__label">STEP1</span>
    <span class="step__text">정보 입력</span>
  </div>
  <div class="step step--current" aria-current="step">
    <span class="step__label">STEP2</span>
    <span class="step__text">내용 검토</span>
  </div>
  <div class="step step--future">
    <span class="step__label">STEP3</span>
    <span class="step__text">최종 확인</span>
  </div>
  <div class="step step--future">
    <span class="step__label">STEP4</span>
    <span class="step__text">완료</span>
  </div>
</nav>

<!-- 상태 수정자: step--done / step--current / step--future / step--warning / step--error -->
<!-- 현재 단계에 aria-current="step" 추가 -->

Classes

클래스	태그	설명
`.stepper`	루트	스테퍼 래퍼 — flex row, gap 8px. `<nav>` 권장
`.step`	루트	개별 단계 카드 — flex: 1, min-width 100px
`.step__label`	요소	상단 레이블 (e.g. "STEP1") — 14px Regular
`.step__text`	요소	하단 텍스트 (e.g. "정보 입력") — 16px Medium
`.step--done`	수정자	완료된 단계 — 초록 배경/테두리
`.step--current`	수정자	현재 진행 중 — 흰 배경, 진한 초록 테두리
`.step--future`	수정자	아직 미진행 — 회색 배경/테두리/텍스트
`.step--warning`	수정자	경고 상태 — 노란 배경/테두리
`.step--error`	수정자	오류 상태 — 빨간 배경/테두리