표지는 높이 사다리를 그대로 씁니다. 끝난 단계는 채운 칸(primary), 지금 단계는 솟은 칸 + primary 고리, 다음 단계는 파인 칸입니다. 오류는 느낌표 + 한 문장, 건너뜀은 빼기 + 점선입니다. 상태는 모양 · 굵기 · 이름 뒤 숨긴 글자로 함께 말하고, 이음선은 실선(지나옴) · 헤어라인(아직)으로 가릅니다.

import

import { Step, Stepper, StepperCompact } from "@uyoolabs/ui/ui";

쓰는 경우

워크스페이스 · 프로젝트 만들기, 결제 설정, 데이터 가져오기처럼 순서가 있는 3~7단계에 씁니다. 끝난 단계로 돌아가 고칠 수 있으면 그 단계를 링크(asChild)로 둡니다.

쓰지 않는 경우

2단계 이하(폼 하나로), 순서 없는 영역(Tabs 로), 진행률 대신으로 쓰지 않습니다. 이름 없이 숫자만 두지 않습니다. 지금 · 다음 단계를 링크로 만들지 않습니다(건너뛰어 앞으로 가지 않습니다). 끝난 단계에 ok(초록)를 쓰지 않습니다 — ok 는 상태의 뜻입니다.

알림 · 포커스

Stepper 는 바뀐 단계를 알리지 않습니다. 단계가 바뀌면 앱이 새 단계의 제목으로 포커스를 옮깁니다(아래 예).