Skip to main content

Steps

Overview​

The Steps component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow. It supports horizontal and vertical layouts, customizable markers, and clickable navigation.

Import​

import { Steps } from '@allxsmith/bestax-bulma';

Props​

PropTypeDefaultDescription
valuenumber0Current active step (0-indexed).
itemsStepItemProps[]—Array of step items.
size'small' | 'medium' | 'large'—Size of the steps.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Color variant.
hasMarkerbooleantrueShow step markers.
animatedbooleantrueEnable animations.
roundedbooleantrueUse rounded markers.
verticalbooleanfalseVertical layout.
labelPosition'bottom' | 'right' | 'left''bottom'Position of labels.
mobileMode'minimal' | 'compact' | 'right'—Mobile display mode.
onStepClick(step: number) => void—Callback when a step is clicked.
showStepNumbersbooleantrueDisplays step numbers in the markers.
hasNavigationbooleanfalseShows previous/next navigation buttons.
prevLabelstring—Label for the previous button.
nextLabelstring—Label for the next button.
onPrev() => void—Callback when previous button is clicked.
onNext() => void—Callback when next button is clicked.
childrenReact.ReactNode—Step children (alternative to items).
classNamestring—Additional CSS classes.
...All standard HTML and Bulma helper props(See Helper Props)

StepItemProps​

PropTypeDefaultDescription
labelReact.ReactNode—Step label/title.
iconReact.ReactNode—Icon for the step marker.
clickablebooleanfalseWhether this step is clickable.
completedIconReact.ReactNode'✓'Icon shown when the step is completed.
classNamestring—Additional class for this step.

Usage​

Basic Steps​

A simple step indicator showing progress through a flow.

<Steps
  value={1}
  items={[{ label: 'Account' }, { label: 'Profile' }, { label: 'Complete' }]}
/>

Clickable Steps​

Steps that allow navigation by clicking.

function example() {
  const [step, setStep] = useState(1);
  return (
    <Block>
      <Steps
        value={step}
        items={[
          { label: 'Account', clickable: true },
          { label: 'Profile', clickable: true },
          { label: 'Review', clickable: true },
          { label: 'Complete', clickable: true },
        ]}
        onStepClick={setStep}
        color="primary"
      />
      <Paragraph mt="4">Current step: {step + 1}</Paragraph>
    </Block>
  );
}

Color Variants​

Steps with different color variants.

<Block display="flex" flexDirection="column" gap="5">
  <Steps
    value={1}
    color="primary"
    items={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
  />
  <Steps
    value={1}
    color="success"
    items={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
  />
  <Steps
    value={1}
    color="info"
    items={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
  />
  <Steps
    value={1}
    color="warning"
    items={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
  />
  <Steps
    value={1}
    color="danger"
    items={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
  />
</Block>

Size Variants​

Steps with different size variants.

<Block display="flex" flexDirection="column" gap="5">
  <Steps
    value={1}
    size="small"
    items={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
  />
  <Steps
    value={1}
    items={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
  />
  <Steps
    value={1}
    size="medium"
    items={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
  />
  <Steps
    value={1}
    size="large"
    items={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
  />
</Block>

With Icons​

Steps with custom icons in markers.

<Steps
  value={1}
  color="info"
  items={[
    { label: 'Cart', icon: <Icon name="shopping-cart" variant="solid" /> },
    { label: 'Shipping', icon: <Icon name="truck" variant="solid" /> },
    { label: 'Payment', icon: <Icon name="credit-card" variant="solid" /> },
    { label: 'Done', icon: <Icon name="check" variant="solid" /> },
  ]}
/>

Vertical Layout​

Steps in vertical orientation.

<Steps
  value={1}
  vertical
  color="primary"
  items={[
    { label: 'Create Account' },
    { label: 'Set Up Profile' },
    { label: 'Choose Plan' },
    { label: 'Start Using' },
  ]}
/>

Rounded Markers​

Steps with rounded (circular) markers.

<Steps
  value={2}
  rounded
  color="success"
  items={[
    { label: 'Order Placed' },
    { label: 'Processing' },
    { label: 'Shipped' },
    { label: 'Delivered' },
  ]}
/>

Checkout Flow Example​

A complete checkout flow with navigation buttons.

function example() {
  const [step, setStep] = useState(0);
  const steps = ['Cart', 'Shipping', 'Payment', 'Confirm'];

  return (
    <Block>
      <Steps
        value={step}
        items={steps.map((label, i) => ({ label, clickable: i <= step }))}
        onStepClick={s => s <= step && setStep(s)}
        color="primary"
      />
      <Box mt="4" p="4">
        <Title size="5">{steps[step]}</Title>
        <Paragraph>Content for the {steps[step]} step goes here.</Paragraph>
      </Box>
      <Buttons mt="4">
        <Button
          onClick={() => setStep(Math.max(0, step - 1))}
          disabled={step === 0}
        >
          Previous
        </Button>
        <Button
          color="primary"
          onClick={() => setStep(Math.min(3, step + 1))}
          disabled={step === 3}
        >
          {step === 2 ? 'Place Order' : 'Next'}
        </Button>
      </Buttons>
    </Block>
  );
}

Accessibility​

  • Steps use aria-current="step" on the active step
  • Clickable steps are keyboard navigable with proper focus indicators
  • Use descriptive labels for each step
  • The step markers show completion state with checkmarks
  • Progress - For linear progress indication

Additional Resources​

Pro Tip

Use the onStepClick callback with clickable: true on items to allow users to navigate back to previous steps.