Status

Stepper

A linear flow of steps: production steps on a project (Brief, Script, Shoot, Voiceover, Edit, Thumbnail, Brand review, Publish).

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`steps`Required	`{ key: string; label: string; status?: ProjectStatus }[]`	Each step can name a project stage; its marker then shows that stage's mark (the same one as the board and the calendar key).
`done`Required	`string[]`
`currentLabel`	`string`	The word under the current step (default "Up next").
`actionLabel`	`string`	The current step's button (default "Mark done").
`jump`	`boolean`	Lets any other step be reached in one move, forward or back: a quiet "Move here" on each (on hover or focus, always on touch). `onChange` gets every step before it as done.
`jumpLabel`	`string`	The jump button's word (default "Move here"; its accessible name is "Move to" and the step).
`onChange`	`(done: string[]) => void`
`readOnly`	`boolean`
`label`	`string`
`size`	`'M' \| 'L'`
`className`	`string`

Guidelines

A linear flow of steps: production steps on a project (Brief, Script, Shoot, Voiceover, Edit, Thumbnail, Brand review, Publish). Steps finish in order.

Provide: steps ({ key, label } in order, only the ones that apply), done (the finished keys), onChange(done), and optionally label, readOnly and size (L on phones).

Only the next step can be marked done, with its Mark done button. The last finished step has Undo, which steps back one.
Jump (jump): when steps can be skipped (project stages), every other step gets a quiet Move here, so a project that went from To do straight to Published gets there in one move. It shows on hover or focus, and always on touch screens. Every step before the one you move to counts as done. Without jump, there is no skipping ahead and no unchecking from the middle.
Each step says its state in words (Done, Up next, Later) as well as with its marker: a green check, an accent ring, a gray ring. Changes are announced.
Leave out steps a project does not need, rather than marking them done.

Stages as steps. Give each step a status (a project stage) and its marker shows that stage's mark, the same as the board column headers and the calendar key: the current step in its color, later steps as a plain ring, finished steps as the green check. currentLabel changes "Up next" (the project page uses "Now") and actionLabel changes "Mark done".