Components

Stepper

Steps showing where the user is in a multi-step flow, with WizardFooter for Back and Next.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

Earlier steps are complete; the line between them fills. Below 640 px only the markers and the current step name remain.

import { Stepper, Provider } from '@bigbang/ui';

const steps = [
  { id: 'details', label: 'Details', description: 'Name and contact' },
  { id: 'preferences', label: 'Preferences', description: 'Notifications and language' },
  { id: 'review', label: 'Review', description: 'Check and send' },
];

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Stepper steps={steps} current={1} className="max-w-2xl" />
    </Provider>
  );
}

Vertical

Descriptions sit beside each marker; for side panels and long flows.

import { Stepper, Provider } from '@bigbang/ui';

const steps = [
  { id: 'details', label: 'Details', description: 'Name and contact' },
  { id: 'preferences', label: 'Preferences', description: 'Notifications and language' },
  { id: 'review', label: 'Review', description: 'Check and send' },
];

export default function Vertical() {
  return (
    <Provider locale="en-GB">
      <Stepper steps={steps} current={1} orientation="vertical" />
    </Provider>
  );
}

Step that needs attention

A step with error takes the danger colour and is read as “needs attention”.

import { Stepper, Provider } from '@bigbang/ui';

const steps = [
  { id: 'details', label: 'Details', description: 'Name and contact' },
  { id: 'preferences', label: 'Preferences', description: 'Notifications and language' },
  { id: 'review', label: 'Review', description: 'Check and send' },
];

export default function Attention() {
  return (
    <Provider locale="en-GB">
      <Stepper steps={steps.map((step, index) => (index === 0 ? { ...step, error: true } : step))} current={2} className="max-w-2xl" />
    </Provider>
  );
}

With WizardFooter

onStepChange makes complete steps buttons. WizardFooter hides Back on the first step and says Finish on the last.

Step 2 of 3

import { Button, Stepper, WizardFooter, Provider } from '@bigbang/ui';
import { useState } from 'react';

const steps = [
  { id: 'details', label: 'Details', description: 'Name and contact' },
  { id: 'preferences', label: 'Preferences', description: 'Notifications and language' },
  { id: 'review', label: 'Review', description: 'Check and send' },
];

export default function Wizard() {
  const [current, setCurrent] = useState(1);
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-2xl flex-col gap-xl">
        <Stepper steps={steps} current={current} onStepChange={setCurrent} />
        <WizardFooter
          step={Math.min(current, steps.length - 1)}
          total={steps.length}
          onBack={() => setCurrent((step) => Math.max(0, step - 1))}
          onNext={() => setCurrent((step) => Math.min(steps.length, step + 1))}
          actions={<Button variant="tertiary">Save draft</Button>}
        />
      </div>
    </Provider>
  );
}

Light and dark mode

Complete steps take the primary fill.

import { Stepper, Provider } from '@bigbang/ui';

const steps = [
  { id: 'details', label: 'Details', description: 'Name and contact' },
  { id: 'preferences', label: 'Preferences', description: 'Notifications and language' },
  { id: 'review', label: 'Review', description: 'Check and send' },
];

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Stepper steps={steps} current={1} className="max-w-2xl" />
    </Provider>
  );
}