Alpha component
ProgressStepper component is subject to major changes and is for experimentation purposes only. Not recommended for use in production software.
ProgressStepper component is subject to major changes and is for experimentation purposes only. Not recommended for use in production software.
ProgressStepper can be used to visually represent the division of a process into ordered steps
import { ProgressStepper } from '@contentful/f36-components';// orimport { ProgressStepper } from '@contentful/f36-progress-stepper';
This component can be displayed in a horizontal or vertical orientation.
Example of ProgressStepper with horizontal orientation.
function ProgressStepperHorizontalExample() {return (<ProgressStepper activeStep={2} ariaLabel="Horizontal progress stepper"><ProgressStepper.Step state="complete" /><ProgressStepper.Step state="complete" /><ProgressStepper.Step state="active" /><ProgressStepper.Step /><ProgressStepper.Step /></ProgressStepper>);}
Example of ProgressStepper with vertical orientation.
function ProgressStepperVerticalExample() {return (<divstyle={{height: '400px',display: 'flex',justifyContent: 'center',}}><ProgressStepperactiveStep={2}orientation="vertical"ariaLabel="Vertical progress stepper"><ProgressStepper.Step state="complete" /><ProgressStepper.Step state="complete" /><ProgressStepper.Step state="active" /><ProgressStepper.Step /><ProgressStepper.Step /></ProgressStepper></div>);}
This component can be displayed with steps that show numbers or icons.
Example of ProgressStepper with number step styles and displaying the step state options.
function ProgressStepperNumberExample() {return (<ProgressStepperactiveStep={0}stepStyle="number"ariaLabel="Number progress stepper"><ProgressStepper.Step state="active" labelText="Active" /><ProgressStepper.Step state="complete" labelText="Complete" /><ProgressStepper.Step labelText="Incomplete" /><ProgressStepper.Step state="disabled" labelText="Disabled" /><ProgressStepper.Step state="error" labelText="Error" /><ProgressStepper.Step state="warning" labelText="Warning" /></ProgressStepper>);}
Example of ProgressStepper with icon step styles and displaying the step state options.
function ProgressStepperIconExample() {return (<ProgressStepperactiveStep={0}stepStyle="icon"ariaLabel="Icon progress stepper"><ProgressStepper.Step state="active" labelText="Active" /><ProgressStepper.Step state="complete" labelText="Complete" /><ProgressStepper.Step labelText="Incomplete" /><ProgressStepper.Step state="disabled" labelText="Disabled" /><ProgressStepper.Step state="error" labelText="Error" /><ProgressStepper.Step state="warning" labelText="Warning" /></ProgressStepper>);}
Example of ProgressStepper with horizontal orientation with labels.
function ProgressStepperHorizontalLabelExample() {return (<ProgressStepperactiveStep={2}ariaLabel="Horizontal progress stepper with labels"><ProgressStepper.Step state="complete" labelText="Label 1" /><ProgressStepper.Step state="complete" labelText="Label 2" /><ProgressStepper.Step state="active" labelText="Label 3" /><ProgressStepper.Step labelText="Label 4" /><ProgressStepper.Step labelText="Label 5" /></ProgressStepper>);}
Example of ProgressStepper with vertical orientation with labels.
function ProgressStepperVerticalLabelExample() {return (<divstyle={{height: '400px',display: 'flex',justifyContent: 'center',}}><ProgressStepperactiveStep={2}orientation="vertical"ariaLabel="Vertical progress stepper with labels"><ProgressStepper.Step state="complete" labelText="Label 1" /><ProgressStepper.Step state="complete" labelText="Label 2" /><ProgressStepper.Step state="active" labelText="Label 3" /><ProgressStepper.Step labelText="Label 4" /><ProgressStepper.Step labelText="Label 5" /></ProgressStepper></div>);}
Example of the ProgressStepper with buttons to move between steps.
function ProgressStepperInteractiveExample() {const [currentStep, setCurrentStep] = useState(0);const steps = [{ label: 'Step 1' },{ label: 'Step 2' },{ label: 'Step 3' },{ label: 'Step 4' },{ label: 'Step 5' },];const getSteps = () => {return steps.map((step, index) => {if (index === currentStep) {return (<ProgressStepper.Stepkey={step.label}state="active"labelText={step.label}/>);} else if (index < currentStep) {return (<ProgressStepper.Stepkey={step.label}state="complete"labelText={step.label}/>);}return (<ProgressStepper.Stepkey={step.label}state="incomplete"labelText={step.label}/>);});};return (<><ProgressStepperstepStyle="icon"activeStep={currentStep}ariaLabel="Interactive progress stepper">{getSteps()}</ProgressStepper><Flex marginTop="spacingM" gap="spacingXs"><ButtononClick={() => setCurrentStep(currentStep - 1)}isDisabled={currentStep === 0}>Previous Step</Button><ButtononClick={() => setCurrentStep(currentStep + 1)}isDisabled={currentStep > steps.length - 1}>Next Step</Button></Flex></>);}
Example of the ProgressStepper with clickable steps.
function ProgressStepperClickableExample() {const [activeStep, setActiveStep] = useState(2);const handleStepClick = (stepNumber) => {setActiveStep(stepNumber);};const steps = [<ProgressStepper.Step state="complete" key="step-0" />,<ProgressStepper.Step state="complete" key="step-1" />,<ProgressStepper.Step state="active" key="step-2" />,<ProgressStepper.Step key="step-3" />,<ProgressStepper.Step key="step-4" />,];const getStepState = (stepNumber) => {if (stepNumber < activeStep) {return 'complete';} else if (stepNumber === activeStep) {return 'active';} else {return 'incomplete';}};const getSteps = () => {return steps.map((step, index) => {return React.cloneElement(step, {state: getStepState(index),});});};return (<ProgressStepperactiveStep={activeStep}ariaLabel="Clickable progress stepper"onClick={(stepNumber) => handleStepClick(stepNumber)}>{getSteps()}</ProgressStepper>);}
Example of the ProgressStepper with only previous steps clickable.
function ProgressStepperOnlyPreviousStepsClickableExample() {const [activeStep, setActiveStep] = useState(2);const handleStepClick = (stepNumber) => {setActiveStep(stepNumber);};const steps = [<ProgressStepper.Step state="complete" key="step-0" />,<ProgressStepper.Step state="complete" key="step-1" />,<ProgressStepper.Step state="active" key="step-2" />,<ProgressStepper.Step key="step-3" />,<ProgressStepper.Step key="step-4" />,];const getStepState = (stepNumber) => {if (stepNumber < activeStep) {return 'complete';} else if (stepNumber === activeStep) {return 'active';} else {return 'incomplete';}};const getSteps = () => {return steps.map((step, index) => {const onClickStep =activeStep > index? (stepIndex) => handleStepClick(stepIndex): undefined;return React.cloneElement(step, {state: getStepState(index),onClick: onClickStep,});});};return (<ProgressStepperactiveStep={activeStep}ariaLabel="Clickable progress stepper">{getSteps()}</ProgressStepper>);}
When the ProgressStepper renders in the horizontal orientation with labels, the component will have extra width on the sides of the first and last steps. This extra width is necessary in order to accommodate the centering of the labels under each step. This example demonstrates this extra width so that consumers of this component can plan accordingly in designs, as the ProgressStepper component will not be the same width as the content area.
function ProgressStepperHorizontalWidthLimitation() {const styles = {root: css({border: `1px solid ${tokens.gray300}`,}),stepperContainer: css({padding: `${tokens.spacingS} 0`,}),headerContainer: css({borderTop: `1px solid ${tokens.gray300}`,}),};return (<Box className={styles.root}><Box className={styles.stepperContainer}><ProgressStepperactiveStep={2}ariaLabel="Horizontal progress stepper width limitation example"><ProgressStepper.Step state="complete" labelText="Label 1" /><ProgressStepper.Step state="complete" labelText="Label 2" /><ProgressStepper.Step state="active" labelText="Label 3" /><ProgressStepper.Step labelText="Label 4" /><ProgressStepper.Step labelText="Label 5" /></ProgressStepper></Box><Box className={styles.headerContainer}><Header title="Header within the same parent container" /></Box></Box>);}
Name | Type | Default |
---|---|---|
ariaLabel required | string Label to be used on aria-label for the nav element | |
children required | ReactNode | |
activeStep | number | 0 |
className | string string for additional classNames | |
margin | "spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin to one of the corresponding spacing tokens | |
marginBottom | "spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-bottom to one of the corresponding spacing tokens | |
marginLeft | "spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-left to one of the corresponding spacing tokens | |
marginRight | "spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-right to one of the corresponding spacing tokens | |
marginTop | "spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-top to one of the corresponding spacing tokens | |
onClick | (stepNumber: number) => void Handler when the step is clicked | |
orientation | "horizontal" "vertical" | horizontal |
stepStyle | "number" "icon" | number |
testId | string A [data-test-id] attribute used for testing purposes |
Name | Type | Default |
---|---|---|
activeStep | number Private prop for the ProgressStepper component | |
className | string CSS class to be appended to the root element | |
labelText | string | |
onClick | (stepNumber: number) => void Private prop for the ProgressStepper component | |
orientation | "horizontal" "vertical" Private prop for the ProgressStepper component | |
state | "active" "error" "warning" "disabled" "complete" "incomplete" | incomplete |
stepNumber | number Private prop for the ProgressStepper component | |
stepStyle | "number" "icon" Private prop for the ProgressStepper component | |
testId | string A [data-test-id] attribute used for testing purposes |
ariaLabel
prop for the ProgressStepper
component is required. Provide a label that describes what the progress is about (e.g. App installation progress
).aria-label
provided for the each Step
component communicates information about the step's number and type.