The Stages component shows a user's progress within a set of stages and a detailed view of each step. The Stages component is featured prominently within the CaseView component.

For more information on how to use the features and props for this component, check out the developer documentation.

To learn more about configuration, visit Pega Community.

The Stages component requires a list of stages and a current id that should match one of the ids of the stages provided.

Each stage should represent a logical portion of a larger task and must contain a unique name and id. A stage can be marked as complete, which will render a green checkmark Icon next to that stage's name. A stage may also include a date string that will be displayed in the detailed view of that stage as a relative DateTimeDisplay.


When a user clicks on a stage, a Popover will render underneath that stage with details of the stage's steps. Each step includes a name, id, and a boolean indicating if the step is complete. The Popover displays these steps along with the stage name and date. An option to See full lifecycle will render below the steps that will open a Modal when clicked. The Modal will render a full list of every stage and step included within the Stages component.

When in a mobile view, or on smaller windows, the full lifecycle Modal will automatically open when a user clicks a stage rather than the stage-specific Popover.

current*stringCurrent stage id.
stages*StageProps[]List of objects describing each stage and their state.
classNamestringAdditional CSS classes.