<h2>What’s new in v3</h2>
<ul>
<li><strong>Error state:</strong> Added to represent errors, improving feedback during progress.</li>
<li><strong>Icon:</strong> Optional icons added in each step of the progress tracker, displayed above the step label.</li>
<li><strong>Spacing:</strong> Adjusted for text and icon, from 8px to 4px.</li>
<li><strong>Color:</strong> Connecting track has a new color.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Progress trackers help users understand where they are within a multi‑step flow. The component is used in guided processes where users move through steps in a defined order.<br><br>Use a progress tracker to:</p>
<ul>
<li>Show a clear sequence of steps in a process</li>
<li>Communicate what step the user is currently on</li>
<li>Indicate which steps are completed, active, or upcoming</li>
</ul>
<p>Use a progress tracker for sequential flows. For non‑sequential experiences, choose another navigation component.</p>
<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>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>
<tr>
<td><a href="/components/progress-bar/">Progress bar</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>
</tbody></table>
<h2>Anatomy</h2>
<p>The progress tracker component is made of up to five elements.</p>
<details data-name='image-block' data-images='[{"alt":"The four parts of the progress tracker component.","caption":"1. **Label:** short descriptive text describing the step.\n2. **Icon (optional):** placed above the step label to help communicate the meaning of the step.\n3. **Status indicator:** shows whether the step is in progress or completed, active or inactive.\n4. **Connecting track:** flexible space between status indicators. The track will fill to connect completed and in progress steps to each other.\n5. **Summary text (optional):** used to provide additional context.","url":"https://dds.dell.com/site/v3/components/progress-tracker/progress-tracker-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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' data-hideWidget='false'></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/v3/components/progress-tracker/progress-tracker-usage.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

### Options

Progress trackers can include an **optional icon** above each step’s label. Icons help communicate what the step is about and make it easier to scan the flow.

Use an icon when a step needs extra emphasis, when steps need to be visually distinct, or when the icon helps clarify the meaning of the step. Choose an icon that clearly represents what you want to communicate.

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/progress-tracker/progress-tracker-options.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

The progress tracker component is available in two sizes:

* 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.

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

## 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).

Place the component at the top of your page, preceding any content that is included in the tracked process.

<details data-name='image-block' data-images='[{"alt":"Horizontal progress tracker shown left-aligned and center-aligned.","caption":"","url":"https://dds.dell.com/site/v3/components/progress-tracker/progress-tracker-horizontal-layout.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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/v3/components/progress-tracker/progress-tracker-vertical-layout.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behavior and states

Progress tracker labels use the same interactive states as standalone links, including rest, hover, pressed, focused, and inactive.

They also include progress‑specific states: completed, not completed, in progress, inactive, and error. This communicates the user’s position in the flow and indicate how the process is progressing.

<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/v3/components/progress-tracker/progress-tracker-interaction.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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. **Not completed** steps are shown without fill. **In progress** steps are represented by a status indicator with a dashed border, having a checkmark icon inside.

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.


### Error state

The error state appears when the progress tracker reaches a step that cannot continue because something went wrong, such as an incomplete step or a failed requirement.

In this situation, the affected step shows an error icon instead of the regular status indicator, and both the error icon and step name appear in red. The track after this point becomes inactive, making it clear that the user must fix the issue before moving forward.

## 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

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

Coloque todos os css var em template string igual ao primeiro, mas não altere nada alem disso e me devolva em formato markdown


| Name                                 | Collection | CSS var                                         | Preview    |
| ------------------------------------ | ---------- | ----------------------------------------------- | ---------- |
| progress-tracker/step/gap            | Component  | `var(--dds-progress-tracker-step-gap)`          | \-         |
| progress-tracker/height/sm           | Component  | `var(--dds-progress-tracker-height-sm)`         | \-         |
| icon/size/md                         | Component  | `var(--dds-icon-size-md)`                       | \-         |
| color/text/secondary                 | Semantic   | `var(--dds-color-text-secondary)`               | \#293B4D   |
| progress-tracker/line/thickness      | Component  | `var(--dds-progress-tracker-line-thickness)`    | \-         |
| color/background/SURFACE/tertiary    | Semantic   | `var(--dds-color-background-surface-tertiary)`  | \#C5D4E3   |
| progress-tracker/content/gap         | Component  | `var(--dds-progress-tracker-content-gap)`       | \-         |
| progress-tracker/content/padding     | Component  | `var(--dds-progress-tracker-content-padding)`   | \-         |
| icon/size/sm                         | Component  | `var(--dds-icon-size-sm)`                       | \-         |
| link/gap                             | Component  | `var(--dds-link-gap)`                           | \-         |
| icon/size/xs                         | Component  | `var(--dds-icon-size-xs)`                       | \-         |
| link/neutral/rest                    | Component  | `var(--dds-link-neutral-rest)`                  | \#1D2C3B   |
| color/text/tertiary                  | Semantic   | `var(--dds-color-text-tertiary)`                | \#5C6E7E   |
| icon/size/lg                         | Component  | `var(--dds-icon-size-lg)`                       | \-         |
| progress-tracker/frame/size/sm       | Component  | `var(--dds-progress-tracker-frame-size-sm)`     | \-         |
| border/radius/rounded                | Semantic   | `var(--dds-border-radius-rounded)`              | \-         |
| color/background/SURFACE/neutral     | Semantic   | `var(--dds-color-background-surface-neutral)`   | \#FFFFFF   |
| color/border/BRAND/base              | Semantic   | `var(--dds-color-border-brand-base)`            | \#00468B   |
| progress-tracker/frame/size/lg       | Component  | `var(--dds-progress-tracker-frame-size-lg)`     | \-         |
| color/background/SURFACE/inactive    | Semantic   | `var(--dds-color-background-surface-inactive)`  | \#E1E1E1   |
| color/border/INACTIVE/base           | Semantic   | `var(--dds-color-border-inactive-base)`         | \#7E7E7E   |
| color/text/inactive                  | Semantic   | `var(--dds-color-text-inactive)`                | \#B6B6B6   |
| link/neutral/hover                   | Component  | `var(--dds-link-neutral-hover)`                 | \#141D28   |
| link/active                          | Component  | `var(--dds-link-active)`                        | \#002A58   |
| link/neutral/active                  | Component  | `var(--dds-link-neutral-active)`                | \#0A0E14   |
| border/radius/xs                     | Semantic   | `var(--dds-border-radius-xs)`                   | \-         |
| color/background/SURFACE/transparent | Semantic   | `var(--dds-color-background-surface-transparent)`| \#FFFFFF00 |
| link/hover                           | Component  | `var(--dds-link-hover)`                         | \#00468B   |
| color/text/NEUTRAL/hover             | Semantic   | `var(--dds-color-text-neutral-hover)`           | \#141D28   |
| color/text/brand                     | Semantic   | `var(--dds-color-text-brand)`                   | \#0672CB   |
| color/background/BRAND/base-rest     | Semantic   | `var(--dds-color-background-brand-base-rest)`   | \#0672CB   |
| link/rest                            | Component  | `var(--dds-link-rest)`                          | \#0063B8   |
| color/text/ERROR/rest                | Semantic   | `var(--dds-color-text-error-rest)`              | \#BB2A33   |
| color/text/ERROR/hover               | Semantic   | `var(--dds-color-text-error-hover)`             | \#8C161F   |
| color/text/ERROR/pressed             | Semantic   | `var(--dds-color-text-error-pressed)`           | \#590A0F   |
| color/background/ERROR/base-rest     | Semantic   | `var(--dds-color-background-error-base-rest)`   | \#D0353F   |


To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-progress-tracker--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-progress-tracker--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-progress-tracker--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-progress-tracker--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-progress-tracker--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-progress-tracker--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

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

Progress Tracker