Steps

The steps component is built to handle user journeys, making it clear to the end user where they are in the process.

React

released

Vue

released

Elements

unsupported

Android

released

iOS

released

Examples

Usage

Design Guidelines

See Figma: Warp - Components / Step Indicator

Questions?

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

Frameworks

Import

You can import the component like so:

import { Steps, Step } from '@warp-ds/react';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { Steps, Step } from '@warp-ds/react/components/steps';

Syntax

function Example() {
  return (
    <Steps>
      <Step completed>
        <h4>Step one</h4>
        <p>Content</p>
      </Step>
      <Step active>
        <h4>Step two</h4>
        <p>Content</p>
      </Step>
      <Step>
        <h4>Step three</h4>
        <p>Content</p>
      </Step>
    </Steps>
  );
}

Note the active and completed properties on the <Step> component. You have to conditionally set the truthiness of these properties depending on where in the process the user is. See interactive example below.

Interactive usage

function Example() {
  const [state, setState] = useState(0);
  const [horizontal, setHorizontal] = useState(false);
  const [right, setRight] = useState(false);

  const handleIncrease = () => {
    if (state === 3) {
      return setState(0);
    }

    return setState((state) => state + 1);
  };

  return (
    <>
      <Button onClick={handleIncrease} small>
        Complete a step
      </Button>
      <Button className="ml-8" onClick={() => setHorizontal(!horizontal)} small>
        {horizontal ? 'Vertical' : 'Horizontal'}
      </Button>
      {!horizontal && (
        <Button className="ml-8" onClick={() => setRight(!right)} small>
          {right ? 'Left' : 'Right'}
        </Button>
      )}

      <Steps className="mt-20" horizontal={horizontal} right={right}>
        <Step active={state === 0} completed={state > 0}>
          <h4 className="mt-0">Step one</h4>
          <p>Some content</p>
        </Step>
        <Step active={state === 1} completed={state > 1}>
          <h4 className="mt-0">Step two</h4>
          <p>Some content</p>
        </Step>
        <Step active={state === 2} completed={state > 2}>
          <h4 className="mt-0">Step three</h4>
          <p>Some content</p>
        </Step>
      </Steps>
    </>
  );
}

Note the horizontal and right properties on the <Steps> component. These choose the direction and alignment of the steps.

Props

Steps

Required props

name	type	default	notes
children	Element[]		Two or more Step components

Optional Props

name	type	default	notes
horizontal	boolean	false	Direction of steps
right	boolean	false	Align steps to the right
className	string		Additional CSS class for the container

Step

Required props

name	type	default	notes
children	Element | Element[]		Contents of Step component

Optional Props

name	type	default	notes
active	boolean	false	Step is active
completed	boolean	false	Step is completed