Components

Stepper

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

Storybook: Storybook
Source: Source

When to use

Stepper is for ordered flows of three to seven steps: account setup, an application, an import. WizardFooter is the bottom bar of the same flow.

When not to use

For two steps: “Step 1 of 2” in the heading is enough.
For sections without an order: use Tabs or a list of contents.
For a percentage: use Meter.

Anatomy

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>
  );
}

Marker: 24 px; a check when complete, a ring and number when current, a faded number after.
Name and description: The description is optional.
Connector: Fills when the step before it is complete.
WizardFooter: Back, “Step 2 of 3”, extra actions, and Next or Finish.

Behaviour

When a step completes, the check grows in and the next line fills.
With onStepChange, complete and attention steps become buttons; later steps cannot be skipped to.
During loading, WizardFooter shows a spinner on Next and disables Back.
With nextType="submit", Next submits the surrounding form, so a Form checks the step.

Guidelines

Write step names as short nouns: “Details”, “Preferences”.
Do not stop users going back; keep what they entered.
On the last step, say what happens instead of Next: finishLabel="Send".

Content

Turkish	English
İlerleme	Progress
tamamlandı / geçerli adım / düzeltilmesi gerekiyor	complete / current step / needs attention
Adım {current} / {total}	Step {current} of {total}
Geri / İleri / Tamamla	Back / Next / Finish

Form: Checks the fields in a step.
Meter: Percentage progress.