Progress stepper

Overview

Style

Guidelines

Code

Accessibility

Demos

Progress stepper

Color Context

Compact Horizontal

Compact Vertical

Custom Icon

Linked Steps

Rich Descriptions

Vertical At

Vertical Stepper

Progress stepper

Color Context

Compact Horizontal

Compact Vertical

Custom Icon

Linked Steps

Rich Descriptions

Vertical At

Vertical Stepper

Progress stepper

Default horizontal progress stepper showing complete, warning, failed, active, and inactive steps.

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper>
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" description="Currently working on this step">
    Active Step
  </rh-progress-step>
  <rh-progress-step description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper>
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

Color Context

Progress stepper displayed across light and dark color contexts.

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-context-demo>
  <rh-context-picker id="picker" target="navigation" allow="darkest, lightest"></rh-context-picker>
  <rh-progress-stepper>
    <rh-progress-step state="complete" description="This step has been completed successfully">
      Complete Step
    </rh-progress-step>
    <rh-progress-step state="warn" description="This step has a warning that needs attention">
      Warning Step
    </rh-progress-step>
    <rh-progress-step state="fail" description="This step has failed and needs to be retried">
      Failed Step
    </rh-progress-step>
    <rh-progress-step state="active" description="Currently working on this step">
      Active Step
    </rh-progress-step>
    <rh-progress-step state="inactive" description="This step is not yet started">
      Inactive Step
    </rh-progress-step>
  </rh-progress-stepper>
</rh-context-demo>

import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { ContextPicker } from "@rhds/elements/react/rh-context-picker/rh-context-picker.js";
import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <ContextPicker id="picker" target="navigation" allow="darkest, lightest" />
    <ProgressStepper>
      <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
      <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
      <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
      <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
      <ProgressStep state="inactive" description="This step is not yet started">Inactive Step</ProgressStep>
    </ProgressStepper>
  </ContextDemo>
);

Compact Horizontal

Compact horizontal progress stepper with reduced spacing between steps.

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper compact="">
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" description="Currently working on this step">Active Step</rh-progress-step>
  <rh-progress-step state="inactive" description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper compact>
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep state="inactive" description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

Compact Vertical

Compact vertical progress stepper with reduced spacing between steps.

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper compact="" orientation="vertical">
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" description="Currently working on this step">
    Active Step
  </rh-progress-step>
  <rh-progress-step state="inactive" description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper compact orientation="vertical">
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep state="inactive" description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

Custom Icon

Progress stepper with a custom hourglass icon on one step using the icon attribute.

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper>
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Current Step
  </rh-progress-step>
  <rh-progress-step description="Currently working on this step" icon="hourglass">
    Custom
  </rh-progress-step>
  <rh-progress-step description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper>
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="complete" description="This step has been completed successfully">Current Step</ProgressStep>
    <ProgressStep description="Currently working on this step" icon="hourglass">Custom</ProgressStep>
    <ProgressStep description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

Linked Steps

Progress stepper with linked steps using the href attribute on each step.

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper>
  <rh-progress-step state="complete" href="#" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" href="#" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" href="#" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" href="#" description="Currently working on this step">
    Active Step
  </rh-progress-step>
  <rh-progress-step href="#" description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper>
    <ProgressStep state="complete" href="#" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" href="#" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" href="#" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" href="#" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep href="#" description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

Rich Descriptions

Progress stepper with rich HTML descriptions slotted into each step.

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper>
  <rh-progress-step state="complete">
    Complete Step
    <span slot="description">
      This step has been <strong>completed</strong> successfully
    </span>
  </rh-progress-step>
  <rh-progress-step state="warn">
    Warning Step
    <span slot="description">
      This step has a <em>warning</em> that needs attention
    </span>
  </rh-progress-step>
  <rh-progress-step state="fail">
    Failed Step
    <span slot="description">
      This step has <strong>failed</strong> and needs to be retried
    </span>
  </rh-progress-step>
  <rh-progress-step state="active">
    Active Step
    <span slot="description">
      Currently <u>working</u> on this step
    </span>
  </rh-progress-step>
  <rh-progress-step>
    Inactive Step
    <span slot="description">
      This step is <s>not yet started</s>
    </span>
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper>
    <ProgressStep state="complete">
      Complete Step
      <span slot="description">
        This step has been
        <strong>completed</strong>
        successfully
      </span>
    </ProgressStep>
    <ProgressStep state="warn">
      Warning Step
      <span slot="description">
        This step has a
        <em>warning</em>
        that needs attention
      </span>
    </ProgressStep>
    <ProgressStep state="fail">
      Failed Step
      <span slot="description">
        This step has
        <strong>failed</strong>
        and needs to be retried
      </span>
    </ProgressStep>
    <ProgressStep state="active">
      Active Step
      <span slot="description">
        Currently
        <u>working</u>
        on this step
      </span>
    </ProgressStep>
    <ProgressStep>
      Inactive Step
      <span slot="description">
        This step is
        <s>not yet started</s>
      </span>
    </ProgressStep>
  </ProgressStepper>
);

Vertical At

Progress stepper that switches to vertical orientation at the small breakpoint using the vertical-at attribute.

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper vertical-at="sm">
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" description="Currently working on this step">
    Active Step
  </rh-progress-step>
  <rh-progress-step description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper vertical-at="sm">
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

Vertical Stepper

Vertical progress stepper with steps stacked top to bottom.

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper orientation="vertical">
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" description="Currently working on this step">
    Active Step
  </rh-progress-step>
  <rh-progress-step description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper orientation="vertical">
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

Edit this page on GitHub

Progress stepper

Progress stepper

Color Context

Compact Horizontal

Compact Vertical

Custom Icon

Linked Steps

Rich Descriptions

Vertical At

Vertical Stepper

Other libraries

Feedback

Red Hat footer

Red Hat legal and privacy links

Red Hat legal and privacy links

Progress stepper

Other libraries

Feedback

Related elements or patterns

Red Hat footer

Red Hat legal and privacy links

Red Hat legal and privacy links