Warp Design System

Appearance

Steps - Elements ​

The steps component is built to handle user journeys, showing progress.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Usage ​

The steps component consists of two custom elements that work together:

  • <w-step-indicator> - The container that manages step layout and orientation
  • <w-step> - Individual step items within the indicator

Each <w-step> can be marked as active or completed to indicate progress. The <w-step-indicator> component automatically handles:

  • Vertical and horizontal layouts
  • Left and right alignment (for vertical layout)
  • Visual connecting lines between steps
  • ARIA attributes for accessibility

Examples ​

html
<w-step-indicator>
  <w-step completed>
    <h4>Step one</h4>
    <p>This step is completed</p>
  </w-step>
  <w-step active>
    <h4>Step two</h4>
    <p>This is the current step</p>
  </w-step>
  <w-step>
    <h4>Step three</h4>
    <p>This step is upcoming</p>
  </w-step>
</w-step-indicator>

<script type="module">
  // Update step states programmatically
  const steps = document.querySelectorAll('w-step');

  // Mark a step as completed
  steps[0].completed = true;

  // Mark a step as active
  steps[1].active = true;
</script>

Horizontal steps ​

html
<w-step-indicator horizontal>
  <w-step completed>
    <h4>Step 1</h4>
    <p>Completed</p>
  </w-step>
  <w-step active>
    <h4>Step 2</h4>
    <p>In progress</p>
  </w-step>
  <w-step>
    <h4>Step 3</h4>
    <p>Upcoming</p>
  </w-step>
</w-step-indicator>

Right-aligned vertical steps ​

right can not be used with horizontal (horizontal wins).

html
<w-step-indicator right>
  <w-step completed>
    <h4>Step 1</h4>
    <p>Completed</p>
  </w-step>
  <w-step active>
    <h4>Step 2</h4>
    <p>In progress</p>
  </w-step>
  <w-step>
    <h4>Step 3</h4>
    <p>Upcoming</p>
  </w-step>
</w-step-indicator>

<w-step-indicator> API ​

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties ​

NameTypeDefaultSummary
horizontalbooleanfalseDisplay steps horizontally instead of vertically
rightbooleanfalseAlign steps to the right (vertical layout only)

Property Details ​

horizontal ​

Display steps horizontally instead of vertically

  • Type: boolean
  • Default: false

Align steps to the right (vertical layout only)

  • Type: boolean
  • Default: false

<w-step> API ​

Properties ​

NameTypeDefaultSummary
activebooleanfalseWhether this step is active.
completedbooleanfalseWhether this step is completed.

Property Details ​

active ​

Whether this step is active.

The active step displays a filled indicator.

  • Type: boolean
  • Default: false
completed ​

Whether this step is completed.

Completed steps display a checkmark icon and a filled indicator.

  • Type: boolean
  • Default: false

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system