Import
import { ProgressStepper } from '@contentful/f36-components';
import { ProgressStepper } from '@contentful/f36-progress-stepper';
Examples
Orientation
This component can be displayed in a horizontal or vertical orientation.
Example of ProgressStepper with horizontal orientation.
function ProgressStepperHorizontalExample() {
return (
<ProgressStepper activeStep={2}>
<ProgressStepper.Step variant="complete" />
<ProgressStepper.Step variant="complete" />
<ProgressStepper.Step variant="active" />
<ProgressStepper.Step />
<ProgressStepper.Step />
</ProgressStepper>
);
}
Example of ProgressStepper with vertical orientation.
function ProgressStepperVerticalExample() {
return (
<div
style={{
height: '400px',
display: 'flex',
justifyContent: 'center',
}}
>
<ProgressStepper activeStep={2} orientation="vertical">
<ProgressStepper.Step variant="complete" />
<ProgressStepper.Step variant="complete" />
<ProgressStepper.Step variant="active" />
<ProgressStepper.Step />
<ProgressStepper.Step />
</ProgressStepper>
</div>
);
}
Step Styles
This component can be displayed with steps that show numbers or icons.
Example of ProgressStepper with number step styles and displaying the variant options.
function ProgressStepperNumberExample() {
return (
<ProgressStepper activeStep={0} stepStyle="number">
<ProgressStepper.Step variant="active" labelText="Active" />
<ProgressStepper.Step variant="complete" labelText="Complete" />
<ProgressStepper.Step labelText="Incomplete" />
<ProgressStepper.Step variant="disabled" labelText="Disabled" />
<ProgressStepper.Step variant="error" labelText="Error" />
<ProgressStepper.Step variant="warning" labelText="Warning" />
</ProgressStepper>
);
}
Example of ProgressStepper with icon step styles and displaying the variant options.
function ProgressStepperIconExample() {
return (
<ProgressStepper activeStep={0} stepStyle="icon">
<ProgressStepper.Step variant="active" labelText="Active" />
<ProgressStepper.Step variant="complete" labelText="Complete" />
<ProgressStepper.Step labelText="Incomplete" />
<ProgressStepper.Step variant="disabled" labelText="Disabled" />
<ProgressStepper.Step variant="error" labelText="Error" />
<ProgressStepper.Step variant="warning" labelText="Warning" />
</ProgressStepper>
);
}
Labels
Example of ProgressStepper with horizontal orientation with labels.
function ProgressStepperHorizontalLabelExample() {
return (
<ProgressStepper activeStep={2}>
<ProgressStepper.Step variant="complete" labelText="Label 1" />
<ProgressStepper.Step variant="complete" labelText="Label 2" />
<ProgressStepper.Step variant="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 (
<div
style={{
height: '400px',
display: 'flex',
justifyContent: 'center',
}}
>
<ProgressStepper activeStep={2} orientation="vertical">
<ProgressStepper.Step variant="complete" labelText="Label 1" />
<ProgressStepper.Step variant="complete" labelText="Label 2" />
<ProgressStepper.Step variant="active" labelText="Label 3" />
<ProgressStepper.Step labelText="Label 4" />
<ProgressStepper.Step labelText="Label 5" />
</ProgressStepper>
</div>
);
}
Interactive Example
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.Step
key={step.label}
variant="active"
labelText={step.label}
/>
);
} else if (index < currentStep) {
return (
<ProgressStepper.Step
key={step.label}
variant="complete"
labelText={step.label}
/>
);
}
return (
<ProgressStepper.Step
key={step.label}
variant="incomplete"
labelText={step.label}
/>
);
});
};
return (
<>
<ProgressStepper stepStyle="icon" activeStep={currentStep}>
{getSteps()}
</ProgressStepper>
<Flex marginTop="spacingM" gap="spacingXs">
<Button
onClick={() => setCurrentStep(currentStep - 1)}
isDisabled={currentStep === 0}
>
Previous Step
</Button>
<Button
onClick={() => setCurrentStep(currentStep + 1)}
isDisabled={currentStep > steps.length - 1}
>
Next Step
</Button>
</Flex>
</>
);
}
ProgressStepper
Name | Type | Default |
---|
children required | ReactNode | |
activeStep | number | 0 |
className | string CSS class to be appended to the root element | |
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 | |
orientation | "horizontal" "vertical" | horizontal |
stepStyle | "number" "icon" | number |
testId | string A [data-test-id] attribute used for testing purposes | |
ProgressStepper.Step
Name | Type | Default |
---|
activeStep | number Private prop for the ProgressStepper component | |
className | string CSS class to be appended to the root element | |
labelText | string | |
orientation | "horizontal" "vertical" Private prop for the ProgressStepper component | |
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 | |
variant | "active" "error" "warning" "disabled" "complete" "incomplete" | incomplete |
Content guidelines
- The progress stepper provides visual feedback to help guide the user through a workflow that involves linear steps
- Each step has an optional label
- Label text should be short, clear and concise
Accessibility
- The
aria-label
should be accessible for the status and optional label of every progress step. The status should communicate information progress step's number or icon, as well as the step variant.