Progress tracker

Other names: process indicator, step list

A progress tracker displays the steps and progress through a journey.

Use the progress tracker to show:

Milestones
Timelines
Chronological steps

Horizontal tracker

Example
Source code

Example

Step 1

Briefly discuss the step or identify the milestone.

Step 2

Keep the message clear and concise.

Step 3

Do not link to more information from the tracker.

Step 4

Instead, link to additional information in your body content or tracker caption.

Source code



    
        
        
            
                
            
            Step 1
            Briefly discuss the step or identify the milestone.
        
        
    

    
        
        
            
                
            
            Step 2
            Keep the message clear and concise.
        
        
    

    
        
        
            
                
            
            Step 3
            Do not link to more information from the tracker.
        
        
    

    
        
        
            
                
            
            Step 4
            Instead, link to additional information in your body content or tracker caption.

Example

Step 1 Contributor

Month and year

Briefly discuss the step or identify the milestone.
Step 2 Contributor

Month and year

Keep the message clear and concise.
Step 3 Contributor

Month and year

Do not link to more information from the tracker.
Step 4 Contributor

Month and year

Instead, link to additional information in your body content or tracker caption.

Source code



    
    
        
            
                
                    
                    
                        Step 1 Contributor
                        Month and year
                    
                    
                    
                    
                        
                        
                            
                        
                        
                        
Briefly discuss the step or identify the milestone.




                    
                    
                
            
            
                
                    
                    
                        Step 2 Contributor
                        Month and year
                    
                    
                    
                    
                        
                        
                            
                        
                        

                        
Keep the message clear and concise.




                    
                    
                
            
            
                
                    
                    
                        Step 3 Contributor
                        Month and year
                    
                    
                    
                    
                        
                        
                            
                        
                        

                        
Do not link to more information from the tracker.




                    
                    
                
            
            
                
                    
                    
                        Step 4 Contributor
                        Month and year
                    
                    
                    
                    
                        
                        
                            
                        
                        
                        
Instead, link to additional information in your body content or tracker caption.

Step list

Example
Source code

Example

Give your steps a clear, concise title
The step list is a good fit for lengthy content. Use this space to discuss the step or identify the milestone. If there is information that your visitor must know before completing this step, you can talk about that here too.
Make your steps actionable
Be sure to tell your visitor exactly what they have to do to complete the step. If the process is not fully fleshed out, then this component may not be the best fit for your content.
Conclude the process
All good things must come to an end. Tell your reader how to complete their task. If needed, you can link to additional information in the step list content.

Source code


  
    Give your steps a clear, concise title
    

    
   The step list is a good fit for lengthy content. Use this space to discuss the step or identify the milestone. If there is information that your visitor must know before completing this step, you can talk about that here too.
  
  
  
    Make your steps actionable
    

    
   Be sure to tell your visitor exactly what they have to do to complete the step. If the process is not fully fleshed out, then this component may not be the best fit for your content.
  
  
  
    Conclude the process
    

    
   All good things must come to an end. Tell your reader how to complete their task. If needed, you can link to additional information in the step list content.

Usage

When and how to use it

The progress tracker shows visitors where they are in a process. It can be used to help visitors navigate through processes by selecting steps.

Progress trackers should display three or more steps or events in a sequence.

How not to use it

Do not use the progress tracker to display items that are out of order or unrelated. Use bullet points instead.

Do not use the progress tracker component if there is not a fleshed out process to track.

Accessibility

Standard accessibility review

Each time a new component version is published:

Test with the axe accessibility tool
Review with the VoiceOver or NVDA screen reader
Ensure all actionable elements are accessible by keyboard command and tab in a logical order
Check the component layout on a variety of screen sizes