> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/progress-indicator.md).

# Progress Indicator

The Avonni Progress Indicator component displays a multi-step progress indicator that tracks completion through a sequence of steps. Use it to visualize where a record or user stands in a process — such as an Opportunity stage, a Case status, or a custom onboarding workflow.

## Overview

The component ships with two builder presets: **Progress Indicator** (the default horizontal dot-and-line style) and **Path** (Salesforce Sales Path-style chevron steps). Both presets use the same component and properties — the preset just pre-fills the **Type** setting for you.

Beyond those two presets, the component supports four additional types: **Vertical**, **Bar**, **Circle**, and **Vertical Navigation**, giving you six display variants in total.

| Type                    | What it looks like                                                                            | Best for                                                                                                          |
| ----------------------- | --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| **Horizontal**          | A row of step indicators connected by a line, labels above or below each dot.                 | Default desktop pattern. Works for 3–6 short-labeled steps.                                                       |
| **Vertical**            | A vertical column of steps with content and optional sub-steps and actions next to each step. | Long step lists, mobile, anywhere with limited horizontal space, processes that need supporting content per step. |
| **Bar**                 | A single horizontal progress bar with a percentage.                                           | Simple completion meters where step names don't matter.                                                           |
| **Circle**              | A circular progress ring with a percentage in the middle.                                     | Compact KPI tiles, "% complete" indicators.                                                                       |
| **Path**                | Salesforce Sales Path style — chevron-shaped steps.                                           | Opportunity stages, Case statuses, anything that mirrors native Salesforce Path.                                  |
| **Vertical Navigation** | A vertical list styled like a navigation menu, each step clickable.                           | Wizard-style left-rail navigation, multi-page forms.                                                              |

You can drive the steps from a Salesforce picklist field (such as Opportunity `StageName` or Case `Status`) or manually defined steps. Steps can be made clickable and wired to Interactions, allowing users to advance a process directly from the component.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FeupnaCKgtWLSOpzT9Fde%2Fprogress-indicator-types.png?alt=media" alt="Six progress indicators showing the same four steps as horizontal, vertical, bar, circle, path and vertical navigation"><figcaption><p>The same four steps in all six types, with the first two complete and the third current.</p></figcaption></figure>

## Configuration

To configure the Progress Indicator, select it on the canvas. The **Edit Progress Indicator** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FcSPbMyWkQGW1nLwrceSH%2Fprogress-indicator-builder-properties.png?alt=media" alt="The Edit Progress Indicator panel with the Manual and Picklist data source switch, the Steps list, and Type, Variant, Format and Current Step below it" width="320"><figcaption><p>The Properties tab: the data source switch and the <strong>Steps</strong> list first, then the settings that depend on <strong>Type</strong>.</p></figcaption></figure>

### Steps

The steps come from one of two sources, chosen with the **Manual** / **Picklist** switch at the top of the Properties tab. There is no query or variable source for this component.

| Source       | When to use                                                                                               | How to configure                                                                  |
| ------------ | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| **Manual**   | When the steps are static and never change.                                                               | Add steps one by one in the **Steps** editor.                                     |
| **Picklist** | When steps map to a Salesforce picklist field (Opportunity `StageName`, Case `Status`, custom picklists). | Pick the Object and Field API Name. The component reads the picklist values live. |

A **Picklist** source adds two more settings. **Record Type** narrows the values to the record type your users work with, and **Picklist Sort Order** sets the order the steps appear in; without it the steps follow the field's own order, which is not always the order you want to display.

**Step Properties**

Each step supports the following properties, whichever source it comes from:

| Property      | Description                                                                                                                                                         |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Label**     | The text displayed for the step (for example, "Qualification").                                                                                                     |
| **Value**     | The internal identifier used in Current Step, Completed Steps, and Error Steps. Must be unique. For picklist sources, this is automatically the picklist API value. |
| **Disabled**  | Greys out the step and prevents clicks.                                                                                                                             |
| **Hidden**    | Removes the step from the indicator.                                                                                                                                |
| **Content**   | Rich text shown next to or below the step (Vertical and Path types).                                                                                                |
| **Icon Name** | SLDS icon to display on this step's indicator.                                                                                                                      |

**Vertical Type — Sub Steps and Actions**

The Vertical type (and Vertical Navigation) adds two more configurable areas per step.

**Sub Steps** — nested steps shown beneath a parent step. Each sub-step has its own **Label**, **Value**, **Disable Step**, **Hide Step**, **Actions**, **Visible Action Buttons**, **Hide Actions**, and **Disable Actions** settings.

**Actions** — buttons displayed on the right side of a step. Used for things like "Edit", "View Details", or "Send Notification". Each action has:

| Action Property           | Description                                                        |
| ------------------------- | ------------------------------------------------------------------ |
| **Label**                 | Text shown on the action button.                                   |
| **Name**                  | Unique identifier passed to the **Step Action Click** interaction. |
| **Icon Name**             | SLDS icon for the button.                                          |
| **Disabled** / **Hidden** | Standard visibility controls.                                      |

Per-step settings on the Vertical type also include **Visible Action Buttons** (how many to show before collapsing to a menu), **Hide Actions**, and **Disable Actions**.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fg5dqtdnO9O8xV0l9F2uH%2Fprogress-indicator-vertical-steps.png?alt=media" alt="A vertical progress indicator with content under each step, two sub steps under the current step, and Escalate and Add note action buttons"><figcaption><p>A Vertical indicator with step <strong>Content</strong>, two <strong>Sub Steps</strong> under the current step, and two <strong>Actions</strong> on the right.</p></figcaption></figure>

### General

#### Type

Changes the visual pattern of the indicator. Valid values are **Horizontal**, **Vertical**, **Bar**, **Circle**, **Path**, and **Vertical Navigation**. Defaults to **Horizontal**. This is the first decision, because it decides which of the settings below appear at all.

#### Which settings each type offers

**Current Step**, **Mark as Complete** and **Alternative Text** apply to every type. Everything else is gated on **Type**:

| Setting                         | Horizontal | Vertical | Bar | Circle | Path | Vertical Navigation |
| ------------------------------- | :--------: | :------: | :-: | :----: | :--: | :-----------------: |
| **Variant**                     |      ✓     |     ✓    |     |        |      |          ✓          |
| **Format**                      |      ✓     |     ✓    |     |        |   ✓  |                     |
| **Completed Steps**             |      ✓     |     ✓    |     |        |   ✓  |                     |
| **Error Steps**                 |      ✓     |     ✓    |     |        |   ✓  |                     |
| **Has Error**                   |      ✓     |     ✓    |     |        |   ✓  |                     |
| **Show Step Number**            |      ✓     |     ✓    |     |        |      |                     |
| **Show Step Label**             |      ✓     |          |  ✓  |        |      |                     |
| **Step Label Position**         |      ✓     |          |     |        |      |                     |
| **Hide Bar Value**              |            |          |  ✓  |        |      |                     |
| **Enable click for each steps** |      ✓     |     ✓    |     |        |   ✓  |          ✓          |
| **Step Icon** section           |      ✓     |     ✓    |     |        |      |                     |
| **Current Step Icon** section   |      ✓     |     ✓    |     |        |      |                     |

If a setting you are looking for is missing from the panel, this table is why: change **Type**, or rely on the default for the type you have.

#### Current Step

Sets which step is currently active. Enter the value that matches the **Value** property of one of the configured steps. Typically bound to a record field — for example, `{!$Record.StageName}`. If not set, the first step is used.

#### Mark as Complete

When enabled, all steps are marked as completed. Useful for showing a "process finished" state.

#### Alternative Text

Accessibility text describing the component for screen readers. Available in **Advanced** options.

#### Variant

Changes the appearance of the progress indicator. **Base** is the standard look; **Shaded** is intended to add a light gray border around the step indicators. Defaults to **Base**.

{% hint style="info" %}
**Shaded** currently renders the same as **Base**. The setting applies the Lightning `slds-progress_shade` class, which the current Lightning styling no longer draws, so the two look identical.
{% endhint %}

#### Format

Sets the progression format. **Linear** requires steps to be completed in order; **Non Linear** allows any step to be active regardless of prior completion. Defaults to **Linear**.

#### Completed Steps

An array of step values that are marked as completed (shown with a checkmark).

#### Error Steps

An array of step values that are marked as in error.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FQSOAxBbmspdz0jLvPWhv%2Fprogress-indicator-step-states.png?alt=media" alt="Three horizontal progress indicators showing completed steps, an error step, and every step marked complete"><figcaption><p>Left to right: two <strong>Completed Steps</strong> with a current step, an <strong>Error Step</strong>, and <strong>Mark as Complete</strong>.</p></figcaption></figure>

#### Has Error

When enabled, the current step is displayed in an error state and the error icon is shown on the step indicator.

#### Show Step Number

When enabled, the step indicator displays the step's number instead of a dot when no icon is set. This is the only setting that puts numbers on the steps; **Icon Size** changes the size of the bubble, not what is inside it.

#### Show Step Label

When enabled, the step label is displayed below the indicator.

#### Step Label Position

Controls where step labels appear relative to the indicator. Options: **Top**, **Bottom** (default).

#### Hide Bar Value

When enabled, hides the percentage value displayed inside the progress bar.

#### Enable click for each steps

When enabled, all steps become clickable, whether or not a **Step Click** interaction is configured. With it off, steps are still clickable as soon as you configure at least one action on the **Step Click** trigger.

### Step Icon

This panel is available when **Type** = Horizontal or Vertical.

#### Icon Alignment

Aligns the left icon and actions to the top of the step instead of the center. Useful when a step has multiline content. Options: **Center** (default), **Top**. Requires **Type** = Vertical.

#### Icon Size

Sets the size of the step icon bubbles. Options: **Small** (default), **Medium**, **Large**.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F0iGgccxaNDSTzFGQR1U1%2Fprogress-indicator-icon-size.png?alt=media" alt="Three horizontal progress indicators with small, medium and large step bubbles, all showing step numbers"><figcaption><p>The three bubble sizes, all with <strong>Show Step Number</strong> on. The numbers come from that setting, not from the size.</p></figcaption></figure>

#### Error Icon Name

The SLDS icon displayed on steps in an error state. Defaults to `utility:error`. Available when **Hide Error Icon** is off.

#### Error Image Source

URL of a custom image to display on error steps instead of an icon.

#### Hide Error Icon

When enabled, hides the error icon entirely.

### Current Step Icon

This panel is available when **Type** = Horizontal or Vertical. Use it to replace the active step's dot with a custom icon or image.

#### Icon Name

An SLDS icon name to display on the currently active step (for example, `utility:checkin`).

#### Image Source

URL of an image to display on the active step instead of an icon.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Use Cases

### Visualize Opportunity Stages on a Record Page

Build a Path-style progress indicator that shows the current Opportunity stage, marks completed stages as green, and lets users advance the stage with a click.

{% stepper %}
{% step %}

#### Add the Progress Indicator to the Canvas

* From the **Component Library** (left sidebar), drag the **Progress Indicator** component onto the Canvas.
* In the Properties Panel (right), set **Type** to `Path`.

*Why: The Path type is the closest visual match to Salesforce's native Sales Path and the one users are most familiar with on Opportunities.*
{% endstep %}

{% step %}

#### Connect the steps to the Opportunity Stage picklist

* In the **Steps** section of the Properties Panel, set the data source to **Picklist**.
* **Object:** `Opportunity`
* **Field API Name:** `StageName`
* **Record Type:** Select the appropriate record type if your org uses them.

*Why: This pulls the live picklist values directly from Salesforce — when admins change the stages in Setup, the component updates automatically.*
{% endstep %}

{% step %}

#### Set the current step to the record's stage

* In the **Current Step** field, enter `{!$Record.StageName}`.

*Why: This binds the indicator's active step to the record being viewed, so it shows the right stage on every Opportunity.*
{% endstep %}

{% step %}

#### Make the steps clickable

* Enable **Enable click for each steps**.
* Open the **Interactions** tab.
* On the **Step Click** trigger, add an action: **Update Record**.
  * **Object:** `Opportunity`
  * **Record ID:** `{!$Record.Id}`
  * **Field:** `StageName` = `{!Clicked Step > Value}`

*Why: Clicking a stage updates the Opportunity record to that stage. **Clicked Step** is the whole step object, so you take its **Value** property, which for a picklist source is the picklist API value.*
{% endstep %}

{% step %}

#### Save and Activate

* Click **Save** in the top right.
* Click **Activate** and add the component to the Opportunity Lightning Record Page [using the Lightning App Builder](/dynamic-components/core-concepts/publishing-your-dynamic-components.md).
  {% endstep %}
  {% endstepper %}

### Case Lifecycle on a Service Console

A Vertical indicator showing Case Status with sub-steps for the support process.

{% stepper %}
{% step %}

#### Configure the indicator

* **Type:** `Vertical`
* **Format:** `Non Linear` (support cases sometimes go backwards)
* Set **Steps** source to **Picklist**: Object = `Case`, Field = `Status`.
* **Current Step:** `{!$Record.Status}`
  {% endstep %}

{% step %}

#### Add per-step actions

* On the "Working" step, add an action with **Label** = `Escalate`, **Name** = `escalate`, **Icon Name** = `utility:warning`.
* On the "Escalated" step, add an action with **Label** = `De-escalate`, **Name** = `deescalate`, **Icon Name** = `utility:undo`.
  {% endstep %}

{% step %}

#### Wire actions to a Flow

* In **Interactions**, on the **Step Action Click** trigger, add **Execute Flow** = `Case_Escalation_Flow`.
* Pass `{!Clicked Step Action - Action Name}` and `{!$Record.Id}` to the Flow.
  {% endstep %}
  {% endstepper %}

### Onboarding Wizard with Vertical Navigation

A multi-step user onboarding flow using Vertical Navigation as a left-rail menu.

{% stepper %}
{% step %}

#### Build the steps

* **Type:** `Vertical Navigation`
* Steps (Manual): `welcome`, `profile`, `team`, `preferences`, `done`.
* **Current Step:** `{!OnboardingStage}` (a variable on the record or component).
* Enable **Enable click for each steps**.
  {% endstep %}

{% step %}

#### Show the right content for each step

* Place a **Container** next to the navigation indicator.
* Use Conditional Visibility on the Container's children — each one visible only when `OnboardingStage` matches its step value.
  {% endstep %}

{% step %}

#### Update the variable on click

On the **Step Click** trigger, add **Update Variable**: `OnboardingStage` = `{!Clicked Step > Value}`.
{% endstep %}
{% endstepper %}

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Progress Indicator. Configure them from the **Interactions** tab of the Edit Progress Indicator panel.

### Step Click

Fires when a user clicks a step. Requires **Enable click for each steps** to be enabled, or at least one interaction configured on this trigger. Use the **Clicked Step** output to read the full step object, or **Current Step** to get the value of the clicked step, and branch your flow logic or update a record field accordingly.

Each action on this trigger also has a **Target Name** setting. Leave it empty to run the action for every step; set it to one step to run the action only when that step is clicked. That is often simpler than branching on the step value inside a flow.

### Step Action Click

Fires when a user clicks an action button on a step. Use the **Clicked Step Action - Action Name** output to identify which action was clicked, and **Clicked Step Action - Step** to get the step the action belongs to.

Each action on this trigger also has a **Target Name** setting, listing the step actions you have defined. Point it at one action and the interaction runs only for that action, which saves branching on the action name in a flow.

## Mobile Configuration

The six types behave very differently on small screens. Picking the right type for mobile is the most important decision.

| Type                    | Mobile behavior                                                                                                           | Recommended?                                                   |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| **Vertical**            | Renders as a vertical list — perfect fit for narrow screens.                                                              | Best choice for any process with more than 3–4 steps.          |
| **Vertical Navigation** | Renders as a vertical menu list.                                                                                          | Best for wizard-style mobile flows.                            |
| **Bar**                 | Scales to container width, stays compact.                                                                                 | Always fine on mobile.                                         |
| **Circle**              | Stays compact, scales nothing.                                                                                            | Always fine on mobile.                                         |
| **Horizontal**          | Steps stay on one line. The component scrolls horizontally if steps don't fit, but step labels become cramped or get cut. | Only acceptable with 3 or fewer steps and short labels.        |
| **Path**                | Same as Horizontal — chevrons stay on one line and overflow with horizontal scroll.                                       | Acceptable for 3–4 short stages, otherwise switch to Vertical. |

**Required settings for a mobile-friendly indicator**

| Setting                              | Value                                         | Why                                                              |
| ------------------------------------ | --------------------------------------------- | ---------------------------------------------------------------- |
| **Type**                             | Vertical, Vertical Navigation, Bar, or Circle | Horizontal and Path overflow on phones.                          |
| **Show Step Label** (Horizontal/Bar) | Off, or use very short labels                 | Labels under each step squish together below 480px.              |
| **Icon Size** (Horizontal/Vertical)  | Small                                         | Medium and Large icons take up disproportionate space on phones. |
| **Step labels**                      | Keep under 12 characters                      | Long labels wrap awkwardly or get truncated on narrow viewports. |

**Responsive pattern: different type per device**

To use the Path type on desktop and switch to Vertical on mobile, place two Progress Indicator components inside a Columns layout and toggle their visibility per device:

1. Add a **Columns** component with two columns, each set to **Size = 12** for All devices.
2. Drop the Path indicator in column 1 and the Vertical indicator in column 2.
3. Use a **Conditional Visibility** rule on each:
   * Path indicator: show when device width ≥ 768px.
   * Vertical indicator: show when device width < 768px.

Both indicators read from the same data source, so the user sees the right one on each device.

{% hint style="info" %}
Breakpoints in Avonni are based on **container width**, not screen width. A Progress Indicator inside a narrow Lightning Page region hits the mobile breakpoint earlier than one in a full-width region.
{% endhint %}

## Output Variables

The Progress Indicator exposes these output variables you can reference elsewhere on the page after the user interacts with it.

### Step Click

When a user clicks a step, this variable updates with the clicked step's data.

| Output variable  | Type   | What it returns                                                                           |
| ---------------- | ------ | ----------------------------------------------------------------------------------------- |
| **Clicked Step** | Object | The full step object that was last clicked — its value, label, and other step properties. |

> **Example:** When a user clicks a stage in a Path indicator, use **Clicked Step** to read the step's value and pass it to an Update Record action that advances the Opportunity stage.

### Step Action Click

When a user clicks an action button on a step (Vertical type), these variables identify which action was clicked and on which step.

| Output variable                       | Type          | What it returns                                                                                              |
| ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------ |
| **Clicked Step Action - Action Name** | Text (String) | The `name` of the action button that was clicked. Use it to branch flow logic per action.                    |
| **Clicked Step Action - Step**        | Object        | The full step object that contained the clicked action button — its value, label, and other step properties. |

> **Example:** When a user clicks "Escalate" on the "Working" step, use **Clicked Step Action - Action Name** to confirm the action name and **Clicked Step Action - Step** to confirm which step it came from before triggering a Case Escalation Flow.

## Troubleshooting Common Issues

* **No steps appear** — The Steps data source isn't configured, or the Picklist field returns no values for the user's record type. Open the Steps section and verify the source; for Picklist sources, confirm the user has a matching Record Type and that the picklist has values.
* **Current Step doesn't highlight any step** — The Current Step value doesn't match any step's value; picklist API names are case-sensitive. In Debug, log `{!$Record.StageName}` and compare it character-for-character with the step values — use the API name (e.g. `Closed Won`), not the label.
* **A setting named in this page is missing from the panel**: most settings are gated on **Type**. See the table in the **General** section.
* **Clicking a step does nothing** — Enable click for each steps is off, or no Interaction is configured on the Step Click trigger. Enable **Enable click for each steps** and add at least one action on the Step Click trigger.
* **Step Click fires but the record doesn't update** — The Update Record action is missing the Record ID, or the field mapping uses the step's **Label** instead of its **Value**. Confirm `{!$Record.Id}` is set as the Record ID and use **Clicked Step > Value** for picklist field updates.
* **Step Action Click trigger doesn't fire** — The component Type is not Vertical (actions only exist on Vertical), or the action's Name is empty. Switch Type to Vertical and make sure each action has a unique Name.
* **Variant or Format settings are missing from the panel** — These settings are Type-dependent: Variant only shows for Horizontal, Vertical, and Vertical Navigation; Format only shows for Horizontal, Vertical, and Path. Change Type if you need a setting that's hidden, or rely on the defaults for the current Type.
* **Steps appear in the wrong order** — For Picklist sources, the picklist sort order isn't set or doesn't match the desired display order; for Manual sources, steps were dragged out of order. Set the Picklist Sort Order in the Properties Panel, or reorder steps manually in the Steps editor.
* **Error icon doesn't appear on a step in the Error Steps array** — Either Hide Error Icon is on, or the step's value in the array doesn't match. Turn off **Hide Error Icon** and verify the value matches the step's API value exactly.
* **Horizontal indicator overflows or scrolls horizontally on mobile** — The Horizontal type stays on one line and scrolls when steps don't fit. Switch the Type to Vertical for mobile, or reduce step labels and keep the count under 4.
* **Mark as Complete is on but steps don't show as completed** — Mark as Complete is overridden by an explicit Current Step that points to an earlier step. Either remove the Current Step value or set it to the last step's value.
* **Sub Steps configured but don't appear** — Sub Steps are only supported on the Vertical type. Switch Type to Vertical, or move the sub-step content into the step's Content field.

## Styling

Configure the Progress Indicator's appearance from the **Style** tab of the Edit Progress Indicator panel. Many hooks vary by step state (Current, Completed, Error) and by the **Type** chosen in the Properties tab.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the component's dimensions.

* **Width / Height:** Set fixed dimensions.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color / Size / Style / Radius:** Set the border color, thickness, style, and corner rounding.
  {% endtab %}

{% tab title="Container" %}
Styles the component's own background, behind the steps.

* **Background Color:** Set the container background.
  {% endtab %}

{% tab title="Bar" %}
Styles the progress bar connecting the steps.

* **Color / Completed Color:** Set the incomplete and completed bar colors.
* **Sub Steps Color / Sub Steps Completed Color:** Set the sub-step bar colors.
  {% endtab %}

{% tab title="Label" %}
Styles the format label (percentage / step count).

* **Font Color / Font Size / Font Style / Font Weight:** Base label typography.
* **Text Color / Font …** with **Current**, **Completed**, and **Error** state variants: style the label per step state.
  {% endtab %}

{% tab title="Value" %}
Styles the value text.

* **Font Color / Font Size / Font Style / Font Weight:** Set the value typography.
  {% endtab %}

{% tab title="Step" %}
Styles the step markers, labels, and content. Color and label hooks have **Current**, **Completed**, and **Error** state variants.

* **Icon:** Color / Fill Color / Border Color (plus Current/Completed/Error); Focus Color.
* **Label:** Text Color / Font Size / Font Weight / Font Family / Text Shadow / Line Clamp (per state).
* **Content:** Line Clamp.
  {% endtab %}

{% tab title="Sub Step Label" %}
Styles the sub-step labels (Vertical type). Each hook has **Current**, **Completed**, and **Error** state variants.

* **Text Color / Font Size / Font Weight / Font Family / Text Shadow / Line Clamp:** style the sub-step label per state.
  {% endtab %}

{% tab title="Circle" %}
Styles the circular step markers.

* **Color / Completed Color:** set the incomplete and completed circle colors.
  {% endtab %}

{% tab title="Title" %}
Styles the title text.

* **Font Color / Font Style / Font Weight:** set the title typography.
  {% endtab %}

{% tab title="Path" %}
Styles the Path-preset chevrons. Each color hook has **Current**, **Completed**, and **Error** state variants.

* **Color / Color Hover** (plus Current/Completed/Error): set the chevron color in each state.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/progress-indicator.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.