Timeline usage
Timeline is a group of steps in a prescribed order with statuses that reflect progress.
- 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
- Timeline
- 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
- StepHeader
- 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 |
---|---|---|
active | The current step that should be acted on or is in progress. | Current step |
inactive | The step has not started or cannot be acted on. | Future step |
partial | At least one action for this step is completed. | Partially completed step |
success | All actions for this step are completed. | Completed step |
It is important to include a descriptive title in each step.
Use a title to describe the step.
Dates help set user expectations and indicate when a step was completed.
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.
Actions can be used in steps but are not required.
The steps are intended to be completed in a linear order.
Don’t mark a step as complete until its previous step is completed. Doing so would cause confusion for screen readers.
The colors used have been designed for consistency and accessibility in mind.
Don’t use custom colors for the Timeline or its steps.
The icon used has been carefully selected to indicate a semantic status.
Don’t use custom icons inside the step circle. The Check icon is the only approved icon to indicate a
success
status.- Text should wrap at around 70 characters to preserve legibility