lightning:progressIndicator

Provides a visual indication on the progress of a particular process. This component is available in version 41.0 and later.

A lightning:progressIndicator component displays a horizontal list of steps in a process, indicating the number of steps in a given process, the current step, as well as prior steps completed. For example, Sales Path uses a progress indicator to guide sales reps through the stages of the sales process.

You can create progress indicators with different visual styling by specifying the type attribute. Set type="base" to create a component that inherits styling from progress indicators in the Lightning Design System. Set type="path" to create a component that inherits styling from path in the Lightning Design System.

If the type is not specified, the default type (base) is used. To create steps, use one or more lightning:progressStep component along with label and value attributes. To specify the current step, the currentStep attribute must match one of the value attributes on a lightning:progressStep component.

<aura:component>
    <lightning:progressIndicator currentStep="step2">
        <lightning:progressStep label="Step One" value="step1"/>
        <lightning:progressStep label="Step Two" value="step2"/>
        <lightning:progressStep label="Step Three" value="step3"/>
    </lightning:progressIndicator>
</aura:component>

In the previous example, the label is displayed in a tooltip when you hover over the step. If the progress indicator type is path, the label is displayed on hover if the step is completed or on the step itself if it's a current or incomplete step.

This example creates a path showing the current step at "Step Two". "Step One" is marked completed and "Step Three" is not yet completed.

<aura:component>
    <lightning:progressIndicator type="path" currentStep="step2">
        <lightning:progressStep label="Step One" value="step1"/>
        <lightning:progressStep label="Step Two" value="step2"/>
        <lightning:progressStep label="Step Three" value="step3"/>
    </lightning:progressIndicator>
</aura:component>
Accessibility

Each progress step is decorated with assistive text, which is also the label of that step. For the base type, you can use the Tab key to navigate from one step to the next. Press Shift+Tab to go to the previous step. For the path type, press Tab to activate the current step and use the Up and Down Arrow key or the Left and Right arrow key to navigate from one step to another.

Attributes

Attribute Name Attribute Type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
class String A CSS class for the outer element, in addition to the component's base classes.
title String Displays tooltip text when the mouse moves over the element.
currentStep String The current step, which must match the value attribute of one of progressStep components. If a step is not provided, the value of the first progressStep component is used.
hasError Boolean Indicates whether the current step is in error state and displays a warning icon on the step indicator. Applies to the base type only. This value defaults to false.
type String Changes the visual pattern of the indicator. Valid values are base and path. This value defaults to base.
variant String Changes the appearance of the progress indicator for the base type only. Valid values are base or shaded. The shaded variant adds a light gray border to the step indicators. This value defaults to base.