Public pages
StageTrack
The project stages in order on one line, each with its stage mark, its name and a short caption.
Preview
Props
| Prop | Type | Description |
|---|---|---|
stages | { status: ProjectStatus; label?: string; caption?: React.ReactNode }[] | |
label | string | |
className | string |
Guidelines
The project stages in order on one line, each with its stage mark, its name and a short caption. It explains the flow on public pages and in onboarding. It is not a control: use Stepper for a project's own progress and Picker to change a stage.
Provide: stages, a list of { status, caption } in board order (default: every stage, no captions), and label.
- Marks and names come from the stage definitions, the same as the board, the calendar and the Stepper. Words always come with the marks.
- Captions are short and plain: "With the brand", "Live, and ready to invoice".
- Across on wide screens, joined by a quiet
gray-200line; down the page below 1024px. - Put it on a solid panel.