Page | ActiveCampaign Design Guide

Steps guide users through a multi-step process in a clear and intuitive way.

Overview

Resources

Install


yarn add @activecampaign/camp-components-steps

Variations

Break up long forms or extensive content into smaller pieces with steps to guide the user and keep them engaged.

Horizontal step group

The (StepGroup) handles rendering its child (Step)s. It requires only an orientation and the currently active step. This allows developers the ability to manage when and how the currently active step should progress without needing to translate that for each child step in the group.


import { Step, StepGroup } from '@activecampaign/camp-components-steps';
 
// Mock Step Data
const mockStepsData = [...]
 
export const ExampleStepGroup = () => {
 
  // Manage Current Step
  const [currentStep, setCurrentStep] = useState(0);
  const totalSteps = useMemo(() => mockStepsData.length, [mockStepsData]); // 1 based
  const isComplete = useMemo(() => currentStep >= totalSteps, [currentStep, totalSteps]);
 
  function handleStepForward() {
    setCurrentStep((currentStep) => currentStep + 1);
  }
 
  function handleStepBackward() {
    setCurrentStep((currentStep) => currentStep - 1);
  }
 
  return (
      {/* Steps */}
      <div>
        <StepGroup orientation="horizontal" currentStep={currentStep}>
          {mockStepsData.map(({ text, status }, i) => {
            return <Step text={text} status={status} key={i} />
          })}
        </StepGroup>
      </div>
 
  );
};

Vertical step group

Use the orientation="vertical" step group in modals when there are many steps and space is limited.


import { Step, StepGroup } from '@activecampaign/camp-components-steps';
 
// Mock Step Data
const mockStepsData = [...]
 
export const ExampleStepGroup = () => {
 
  // Manage Current Step
  const [currentStep, setCurrentStep] = useState(0);
  const totalSteps = useMemo(() => mockStepsData.length, [mockStepsData]); // 1 based
  const isComplete = useMemo(() => currentStep >= totalSteps, [currentStep, totalSteps]);
 
  function handleStepForward() {
    setCurrentStep((currentStep) => currentStep + 1);
  }
 
  function handleStepBackward() {
    setCurrentStep((currentStep) => currentStep - 1);
  }
 
  return (
      {/* Steps */}
      <div>
        <StepGroup orientation="vertical" currentStep={currentStep}>
          {mockStepsData.map(({ text, status }, i) => {
            return <Step text={text} status={status} key={i} />
          })}
        </StepGroup>
      </div>
 
  );
};

Warning step

Setting the step status="warning" will set the individual step in a warning state. If a step is in a warning state, it’s meant to visually indicate to the user that while they are able to move through the process, something isn’t complete.


import { Step, StepGroup } from '@activecampaign/camp-components-steps';
 
// Mock Step Data
const mockStepsData = [...]
 
export const ExampleStepGroup = () => {
 
  // Manage Current Step
  const [currentStep, setCurrentStep] = useState(0);
  const totalSteps = useMemo(() => mockStepsData.length, [mockStepsData]); // 1 based
  const isComplete = useMemo(() => currentStep >= totalSteps, [currentStep, totalSteps]);
 
  function handleStepForward() {
    setCurrentStep((currentStep) => currentStep + 1);
  }
 
  function handleStepBackward() {
    setCurrentStep((currentStep) => currentStep - 1);
  }
 
  return (
      {/* Steps */}
      <div>
        <StepGroup orientation="horizontal" currentStep={currentStep}>
          {mockStepsData.map(({ text, status }, i) => {
            return <Step text={text} status="warning" key={i} />
          })}
        </StepGroup>
      </div>
 
  );
};