<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Progress tracker</td>
<td>Provide the status of each step within a multistep process and give visibility on the length of the overall sequence.</td>
</tr>
<tr>
<td><a href="/components/pagination/">Pagination</a></td>
<td>Divides a collection of data or other content types such as images, cards, or search results into multiple pages showing a fixed number of items per page.</td>
</tr>
<tr>
<td><a href="/components/progress-bar/">Progress bar</a></td>
<td>Provides visual or quantitative feedback to users regarding how long a system will take to complete a system process. This component is not intended for use during loading or submission events under five seconds.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The four parts of the progress tracker component.","caption":"The progress tracker component is made of 4 elements:\n\n1. **Label:** short descriptive text describing the step.\n2. **Status indicator:** shows whether the step is in progress or completed, active or inactive.\n3. **Connecting track:** flexible space between status indicators. The track will fill to connect completed and in progress steps to each other.\n4. **Summary text (optional):** used to provide additional context.","url":"https://dds.dell.com/site/production/b0/d4/Progress_Tracker_Anatomy_df3ea05e21.png"}]' data-numberofcolumns='1'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/status-tracker-progress-update/","type":"External"},"title":"Status trackers and progress updates","description":"Read the Nielsen Norman Group&#39;s article on progress tracker guidelines.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/designing-for-waits-and-interruptions/","type":"External"},"title":"Designing for long waits and interruptions","description":"Read the Nielsen Norman Group&#39;s article on progress bar.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

### Multistep processes

Progress tracker uses links to provide navigation throughout a process, such as a form, in addition to conveying status. Refer to the [link](/components/link/) component page for more information on how to use links. 

Though validation is not part of the progress tracker component, remember to provide users with feedback as they move forward through each step.

<details data-name='image-block' data-images='[{"alt":"Progress tracker on a desktop showing an order configuration process.","caption":"","url":"https://dds.dell.com/site/production/06/c0/Progress_Tracker_Usage_53807a1bfc.png"}]' data-numberofcolumns='1'></details>

## Sizes

The progress tracker component is available in two sizes; large and small.

<details data-name='image-block' data-images='[{"alt":"Two sizes of progress tracker.","caption":"","url":"https://dds.dell.com/site/production/a2/81/Progress_Tracker_Small_and_Large_0bf428d4d6.png"}]' data-numberofcolumns='1'></details>

| Size  | Use case                                                                                                                                               |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Large | This default size can be used in most cases, as long as you can maintain visual balance.                                                               |
| Small | Recommended for compact spaces, including mobile, or in place of the large size when the amount of steps may cause the tracker to break to a new line. |

## Layout

### Alignment

#### Horizontal

When choosing an alignment for the horizontal progress tracker, consider your viewport and [grid](/foundations/grid/). \
\
It’s recommended to left-align the progress tracker for readability. However, horizontal alignment is largely up to the designer’s discretion as long as the component is kept to one line and within the viewport (does not require scrolling).

<details data-name='image-block' data-images='[{"alt":"Horizontal progress tracker shown left-aligned and center-aligned.","caption":"Place the component at the top of your page, preceding any content that is included in the tracked process.","url":"https://dds.dell.com/site/production/8c/86/Progress_Tracker_Horizontal_Layout_3b02737e7d.png"}]' data-numberofcolumns='1'></details>

#### Vertical

Vertical progress trackers can be placed to the right or left of on-page content. 

For mobile experiences, use the vertical layout in order to prevent horizontal scrolling and to improve readability. In addition, place the tracker at the beginning of each step.

<details data-name='image-block' data-images='[{"alt":"Two examples of vertical progress tracker shown to the left of on-page content and to the right.","caption":"","url":"https://dds.dell.com/site/production/7a/fd/Progress_Tracker_Vertical_Layout_ddc98e8a3a.png"}]' data-numberofcolumns='1'></details>

## Interaction

### Behavior and states

Progress tracker labels contain states available to [standalone links](/components/link/#standalone-link), including rest, hover, pressed, focused, and inactive. Additionally, use completed and not completed states to show progress


<details data-name='image-block' data-images='[{"alt":"Label behavior in rest, hover, pressed, focused, and inactive states.","caption":"","url":"https://dds.dell.com/site/production/2f/f9/Progress_Tracker_Behaviors_and_States_Completed_d1f30ca273.png"}]' data-numberofcolumns='1'></details>

| State    | Behavior                                                                                                                            |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Rest     | When a user has not interacted with the label, it will appear in its default, rest state.                                           |
| Hover    | On hover, the label is underlined and deepens in color, indicating that it is actionable.                                           |
| Press    | When a user presses the label, the text is underlined and deepens in color once again.                                              |
| Inactive | Inactive labels are displayed with 40% opacity, indicating the option exists but is not yet available to the user.                  |
| Focus    | With keyboard navigation, a blue outline appears around a label when in focus state. Focus states do not appear on inactive labels. |

### Completed versus not completed

Completed steps are indicated by a filled status indicator with checkmark [icon](/foundations/icons/). 

Not completed steps are shown without fill. 

Once steps are completed, the step in the progress tracker component becomes actionable to allow users to easily navigate to previous steps in the process. Not completed steps are not typically actionable until its previous steps are completed. 

If you are considering allowing forward navigation without requiring completion, consider first reordering your process to follow logical forward progression.

## Standards

### Accessibility

#### Make sure all links are unique and descriptive

Don’t use the word “link” in the text, since screen readers will announce it as a link anyway. 

Each link should accurately describe its purpose. While different links should have unique text, links to the same destination used across pages are an exception and should always use the same link text if possible.

WCAG 2.2: [2.4.4 Link Purpose (In context)](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html#:~:text=4%3ALink%20Purpose%20(In%20Context)%20(Level%20A)&text=The%20purpose%20of%20each%20link,ambiguous%20to%20users%20in%20general.), [3.2.4 Consistent Identification](https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification)

#### Make sure there is sufficient space for a user to press

If the links are the small variant (12 pixels) or have a custom type style applied, ensure they have a minimum 24 pixel line-height.

WCAG 2.2: [2.5.8 Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)Images of text in links should be avoided; use actual text instead

Screen readers can’t read text that’s embedded in an image, so images containing text should not be used unless deemed absolutely necessary and supported with equivalent accessible text.

*Exception*: Logos are considered exempt (but still require an accessible text alternative).

WCAG 2.2: [1.4.5 Images of Text](https://www.w3.org/WAI/WCAG22/Understanding/images-of-text)

### Content

#### Label length

Be concise while accurately describing the steps that each label represents within the process.

#### Capitalization

Use sentence case. Only capitalize the first letter of every word for proper nouns, document titles, or product names.

**Do**: Work history

**Don’t**: WORK HISTORY

#### Punctuation

Punctuation is not required for progress tracker labels or optional summary text.

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-progress-tracker--vertical)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-progress-tracker--vertical&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-progress-tracker--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-progress-tracker--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-progresstracker--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-progresstracker--docs&viewMode=docs&websiteFrame=true'></details>

Progress trackers display the user’s location within a multistep process while providing the status of each step.

Progress Tracker

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
