Skip to content
Gusto’s condensed “G” logoWorkbench

Timeline usage

Timeline is a group of steps in a prescribed order with statuses that reflect progress.
Figma logo
  • 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
Explaining the purposes of the different step statuses
Step statusIntentScreen reader text
activeThe current step that should be acted on or is in progress.Current step
inactiveThe step has not started or cannot be acted on.Future step
partialAt least one action for this step is completed.Partially completed step
successAll 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.
Three steps, the first of which shows a “completed” date on the completed step and no dates mentioned on the two incomplete steps
Include the completed date on successful steps.
Three steps, the first of which shows a “completed” date on the completed step and two due dates on the two incomplete steps
Include a due date on incomplete steps if one is required.

Actions can be used in steps but are not required.

Three steps, one with a primary button, the other two with no call to action
Use a primary Button only on the active step.
Three steps, the active step with a primary button, the completed step with a link to review changes, and a future step with no call to action
Use a Link on completed steps to provide the ability for the user to edit the step or review changes.
Three steps, each containing a primary button
Don’t display a primary Button inside more than one step.

The steps are intended to be completed in a linear order.

Three steps showing that the second step is completed while the first and third steps are incomplete
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.

Steps whose colors have been changed from their default “kale” palette
Don’t use custom colors for the Timeline or its steps.

The icon used has been carefully selected to indicate a semantic status.

Three steps, the first completed, but with an altered icon in place of a checkmark
Don’t use custom icons inside the step circle. The Check icon is the only approved icon to indicate a success status.
Three steps, the first showing a Tag indicating that something went wrong with the first step
If you need to indicate a warning or error consider using a Tag as well as a Link or Button in the step content so that the user can fix the error.
  • Text should wrap at around 70 characters to preserve legibility