Stepper

The stepper communicates progress by displaying numbered steps, offering a wizard-like workflow.

Basic

  • The Stepper can be controlled by passing the current step index (zero-based) as the activeStep prop.

Source Code

import { Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomStepNavigation } from '../../utils/Stepper/CustomStepNavigation';
import { StepperSteps } from '../../utils/Stepper/helpers';

export function Basic() {
  const [activeStep, setActiveStep] = React.useState(0);
  return (
    <div>
      <div className="flex justify-center">
        <Stepper activeStep={activeStep} onStepClick={setActiveStep}>

Direction

  • You can control Stepper’s direction state with orientation props.
  • Stepper supports 2 directions vertical and horizontal.
  • Default orientation is horizontal.

Source Code

import { Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomStepNavigation } from '../../utils/Stepper/CustomStepNavigation';
import { StepperSteps } from '../../utils/Stepper/helpers';

export function Direction() {
  const [activeStep, setActiveStep] = React.useState(0);
  return (
    <div className="flex gap-16 justify-center">
      <div>
        <Stepper activeStep={activeStep} onStepClick={setActiveStep} orientation="vertical">

Sizes

  • Stepper supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
  • Default size is lg.

Source Code

import { Step, Stepper, Text } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomStepNavigation } from '../../utils/Stepper/CustomStepNavigation';
import { StepperSteps } from '../../utils/Stepper/helpers';

export function Sizes() {
  const [activeStep, setActiveStep] = React.useState(0);

  return (
    <div>
      <div className="flex flex-col items-center">
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

Source Code

import { Step, Stepper, Text } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomStepNavigation } from '../../utils/Stepper/CustomStepNavigation';
import { StepperSteps } from '../../utils/Stepper/helpers';

export function ResponsiveSize() {
  const [activeStep, setActiveStep] = React.useState(0);
  return (
    <div className={'flex justify-center flex-col items-center'}>
      <Stepper activeStep={activeStep} onStepClick={setActiveStep} size="responsive">
        {StepperSteps.map((step) => (

Full width

  • Stepper can fully fill the available width by setting the fullWidth prop to true.
  • Default fullWidth is false.
  • Max width of stepper is 100% of parent element content space.

Source Code

import { Step, Stepper, Text } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomStepNavigation } from '../../utils/Stepper/CustomStepNavigation';
import { StepperSteps } from '../../utils/Stepper/helpers';

export function FullWidth() {
  const [activeStep, setActiveStep] = React.useState(0);
  return (
    <div>
      <Stepper activeStep={activeStep} onStepClick={setActiveStep} fullWidth>
        {StepperSteps.map((step) => (

Stepper icon types

  • Stepper supports 2 icon types number and icon and can be changed by passing the iconType prop.
  • Default iconType is icon.

Source Code

import { Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomStepNavigation } from '../../utils/Stepper/CustomStepNavigation';
import { StepperSteps } from '../../utils/Stepper/helpers';

export function StepperIconTypes() {
  const [activeStep, setActiveStep] = React.useState(0);
  return (
    <div>
      <div className="flex flex-col items-center">
        <Stepper

Custom step icon

  • Step supports icons from the @ocean-network-express/magenta-ui/icons package.
  • You can pass the icon to the icon prop of step.

Source Code

import {
  MoneyOutline,
  ReceiptOutline,
  UserIdOutline,
  UserOutline,
} from '@ocean-network-express/magenta-ui/icons';
import { Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomStepNavigation } from '../../utils/Stepper/CustomStepNavigation';

export function CustomStepIcon() {

Step status

  • Step supports 5 status error, complete, in-progress, in-complete and in-active and can be changed by passing the status prop.
  • Default status is defined by Stepper mode and current activeStep.

Source Code

import { Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { stepperStatus } from '../../utils/Stepper/helpers';

export function StepStatus() {
  const [activeStep, setActiveStep] = React.useState(0);
  return (
    <div className="flex flex-col gap-16 items-center">
      <Stepper activeStep={activeStep} onStepClick={setActiveStep}>
        {stepperStatus.map((step) => (
          <Step key={'stepper-step-' + step.label} status={step.status} label={step.label}>

Step interaction

  • Stepper can be directly interacted with by setting the allowStepSelect prop to true.
  • You can also pass a callback function to the onStepClick prop to handle the step click event.

Source Code

import { Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomStepNavigation } from '../../utils/Stepper/CustomStepNavigation';
import { StepperSteps } from '../../utils/Stepper/helpers';

export function StepInteraction() {
  const [activeStep, setActiveStep] = React.useState(0);
  return (
    <div>
      <div className="flex items-center flex-col">
        <Stepper activeStep={activeStep} onStepClick={setActiveStep} allowStepSelect>

Linear Stepper

  • A linear stepper allows the user to complete the steps in sequence.
  • Linear stepper is the default mode.
  • Current active step has status in-progress.
  • All steps before active step have status complete.
  • All steps after active step have status in-active.

Source Code

import { Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomStepNavigation } from '../../utils/Stepper/CustomStepNavigation';
import { StepperSteps } from '../../utils/Stepper/helpers';

export function Basic() {
  const [activeStep, setActiveStep] = React.useState(0);
  return (
    <div>
      <div className="flex justify-center">
        <Stepper activeStep={activeStep} onStepClick={setActiveStep}>

Non-linear Stepper

  • Non-linear steppers allow the user to enter a multi-step flow at any point.
  • Non-linear stepper can be enabled by setting the nonLinear prop to true.
  • Current active step has status in-progress.
  • Other steps have status in-complete.
  • It’s up to your own implementation to determine when all steps are completed.

Source Code

import { Button, Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { StepperSteps } from '../../utils/Stepper/helpers';

const initialStepCompleteStatus = StepperSteps.reduce((acc, step, index) => {
  return { ...acc, [index]: false };
}, {});

const getAvailableSteps = (stepCompleteStatus: { [key: string]: boolean }) => {
  return Object.keys(stepCompleteStatus).filter((key) => stepCompleteStatus[key] === false);
};
  • You can also specify which step you are not allowed to select by passing the status prop is in-active.

Source Code

import { Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { StepperSteps } from '../../utils/Stepper/helpers';

export function MaxAvailableStep() {
  const [activeStep, setActiveStep] = React.useState(0);
  return (
    <div className="flex flex-col items-center">
      <Stepper activeStep={activeStep} onStepClick={setActiveStep} allowStepSelect nonLinear>
        {StepperSteps.map((step, index) => (
          <Step

Disabled Stepper

  • All steps in a stepper can be disabled by setting the disabled prop to true.

Source Code

import { Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { StepperSteps } from '../../utils/Stepper/helpers';

export function DisabledStepper() {
  const [activeStep, setActiveStep] = React.useState(2);
  return (
    <div className="flex flex-col items-center">
      <Stepper activeStep={activeStep} onStepClick={setActiveStep} allowStepSelect disabled>
        {StepperSteps.map((step) => (
          <Step key={'stepper-step-' + step.label} label={step.label}>
  • A single step in the stepper can also be disabled by setting the disabled prop to true.

Source Code

import { Step, Stepper } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { StepperSteps } from '../../utils/Stepper/helpers';

export function DisabledSteps() {
  const [activeStep, setActiveStep] = React.useState(3);
  return (
    <div className="flex flex-col items-center">
      <Stepper activeStep={activeStep} onStepClick={setActiveStep} allowStepSelect nonLinear>
        {StepperSteps.map((step, index) => (
          <Step

Was this page helpful?