No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Stepper
import { Stepper } from '@proton/atoms';
The Stepper displays progress through sequential steps. It is controlled by passing the current step index as the activeStep prop.
  • Item 1
  • Item 2 with super long label. I should wrap.
  • Item 3
  • Item 4
() => {
    const [activeStep, setActiveStep] = useState(0);

    const steps = ['Item 1', 'Item 2 with super long label. I should wrap.', 'Item 3', 'Item 4'];

    return (
        <>
            <Stepper position="center" activeStep={activeStep}>
                {steps.map((step) => (
                    <Step key={step}>{step}</Step>
                ))}
            </Stepper>

            <div className="mt-11 flex justify-end">
                <Button
                    className="mr-2"
                    color="norm"
                    disabled={activeStep === 0}
                    onClick={() => setActiveStep((step) => step - 1)}
                >
                    Previous
                </Button>
                <Button
                    color="norm"
                    disabled={activeStep === steps.length - 1}
                    onClick={() => setActiveStep((step) => step + 1)}
                >
                    Next
                </Button>
            </div>
        </>
    );
}
Position
The length of the connectors is limited to 120px, meaning the Step's might not fill the width of the Stepper container. You can use the position prop to set the position of the steps within the stepper.
Position
  • Item 1
  • Item 2.
  • Item 3
  • Item 4
Props
No inputs found for this component. Read the docs