Skip to main content
OORBIT UI
Component catalog
ComponentsStepper

Stepper

Guided multi-step progress for onboarding and complex submissions. Built from semantic tokens, keyboard-friendly HTML, and reusable React composition.

3 examples
  1. 1Workspace
  2. 2Team
  3. 3Review
Step 1 of 3

Workspace

Name the workspace and choose its primary location.

Onboarding stepperGuided progress with explicit next and back actions.
Upload assetsStep 3 of 4
Compact progress stepsA quiet summary for short workflows.

Usage guidance

Use the simplest control that communicates the task. Keep labels specific, preserve comfortable targets, and avoid presenting static information as an action.

Design language

Neutral controls sit on calm charcoal or paper surfaces. Every rounded rectangle uses a continuous G2-style squircle corner; true circles and capsules stay round. Orange is reserved for primary decisions, while coral, violet, cyan, sage, and yellow communicate category and context.