- Timeline can be used to show a user’s progress in a workflow
- Statuses can be updated automatically or through user action
- Timeline should have at least 3 steps
- Timeline helps users visualize the connection between steps
- Steps in a Timeline should contain a brief overview of details but not include lengthy, in-depth information
- Series of events or actions to take all on one page
- Timestamps are optional, but the items should be sequential
- The Timeline component itself is not interactive, but can contain interactive components
- Show only one step at a time
- The steps are interactive
- Used in flows rather than time-based systems
|Step status||Intent||Screen reader text|
|The current step that should be acted on or is in progress.||Current step|
|The step has not started or cannot be acted on.||Future step|
|At least one action for this step is completed.||Partially completed step|
|All actions for this step are completed.||Completed step|
Use a title to describe the step.
Consider using the subtitle to indicate when a step is due or has been completed.
Don’t use the subtitle for anything other than dates and times.
Include the completed date on successful steps.
Include a due date on incomplete steps if one is required.
Don’t mark a step as complete until its previous step is completed. Doing so would cause confusion for screen readers.
Don’t use custom colors for the Timeline or its steps.
- Text should wrap at around 70 characters to preserve legibility