Components

Steps

진행 단계 표시 — 원형 번호와 연결선으로 흐름을 보여줍니다.

✓정보 입력2파일 선택3전송 완료
코드 보기
<div class="steps">
  <span class="st done"><span class="d">✓</span>정보</span>
  <span class="st-line done"></span>
  <span class="st cur"><span class="d">2</span>파일</span>
</div>

Variants

이름설명미리보기
done검정 반전 + ✓✓완료 단계
current검정 반전 + 번호2현재 단계
upcoming테두리 원 + muted 텍스트3예정 단계

Guidelines

✓ Do
  • 3~4단계 이내로 유지
  • 완료 단계는 ✓로 교체
✕ Don't
  • 단계명을 문장으로 쓰지 않는다 (2어절 이내)
  • 5단계 이상이면 흐름을 쪼갠다

Specification

속성토큰/값비고
원20px / 1.5px border
연결선24px × 1.5px
done/cur--foreground 반전