Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Stepper

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

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { Stepper } from '@bigbang/ui';
    Source
    Stepper.tsx
    Storybook
    Stepper · Playground

    Stepper and WizardFooter is in the @bigbang/ui package.

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

    <Stepper steps={steps} current={step} onStepChange={setStep} />
    <WizardFooter step={step} total={steps.length} onBack={back} onNext={next} loading={saving} />;

    Props

    Section titled “Props”

    Stepper

    Section titled “Stepper”
    stepsRequired
    Description
    The steps, in order.
    Type
    readonly StepperStep[]
    currentRequired
    Description
    Index of the current step, from 0. Steps before it are complete.
    Type
    number
    orientation
    Description
    Layout: a row, or a column with descriptions beside each marker.
    Type
    'horizontal' | 'vertical'
    Default
    'horizontal'
    onStepChange
    Description
    Called with a step's index when the user picks a complete or attention step. Without it, steps are not buttons.
    Type
    (index: number) => void
    label
    Description
    Accessible name of the navigation. Without it, the library string ui.stepper.label is used ("İlerleme" or "Progress").
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    WizardFooter

    Section titled “WizardFooter”
    stepRequired
    Description
    Index of the current step, from 0.
    Type
    number
    totalRequired
    Description
    Number of steps.
    Type
    number
    onBack
    Description
    Called by the Back button. Back is hidden on the first step.
    Type
    () => void
    onNext
    Description
    Called by the Next button, or by Finish on the last step. Not called when nextType is submit; the form submits instead.
    Type
    () => void
    nextType
    Description
    submit makes Next submit the surrounding form, so a Form can check the step first.
    Type
    'button' | 'submit'
    Default
    'button'
    nextLabel
    Description
    Next button text. Without it, ui.wizard.next ("İleri" or "Next").
    Type
    string
    finishLabel
    Description
    Text on the last step. Without it, ui.wizard.finish ("Tamamla" or "Finish").
    Type
    string
    loading
    Description
    Shows a spinner on Next while the step is saved; Back is disabled meanwhile.
    Type
    boolean
    Default
    false
    nextDisabled
    Description
    Disables Next.
    Type
    boolean
    Default
    false
    showCount
    Description
    Shows "Step 2 of 4" beside Back.
    Type
    boolean
    Default
    true
    actions
    Description
    Extra actions before Next, such as a tertiary "Save draft" button.
    Type
    ReactNode
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="stepper" and data-component="wizard-footer".
    • On a step: data-status (complete, current, upcoming, error); data-part: marker, label, description, step, compact.
    • WizardFooter data-part: back, count, next.