Skip to main content
OORBIT UI
Component catalog
ComponentsTimeline

Timeline

Sequential events for activity, project milestones, and operational history. Built from semantic tokens, keyboard-friendly HTML, and reusable React composition.

3 examples
  1. Orbit updated the service boardCapacity will be checked again in 15 minutes.
  2. Maya accepted the station moveCold station · Evening preparation
  3. Capacity warning detectedAstoria is pacing 12% above forecast.
Activity timelineA sequential operational history.
DirectionDone
ProductionDone
3ReviewToday
4LaunchAug 18
Milestone timelineHorizontal progress for a campaign.

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.