Components
Phase stepper
A project's phases in order. The current one is highlighted; with links, the selected one is.
Our ownNavigation
components/phase-stepper.tsxPreview
- Phase 1KickoffDone
- Phase 2DirectionsDone
- 3Phase 3BuildNow · until 6 Nov
- 4Phase 4HandoverFrom 9 Nov
Examples
With links
Each phase opens its own view; the selected one is marked.
Props
The ones that change how it looks or behaves. The rest are the HTML element's own.
| Prop | Type | Default |
|---|---|---|
| phases | Phase[] | – |
| selectedId | string | – |
| hrefFor | (phase: Phase) => string | – |
Guidelines
Use it
- Across the top of Home, for the project's phases.
Don't
- Use it for anything but phases.
Used in
The screens in this Base that show it, found in the code.
Accessibility
- With links, the selected phase has aria-current=step.