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={3}>
<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={3} 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={1} 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={1} 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={3}>
<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={3} 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(1);
const steps = [
{ title: 'Step 1' },
{ title: 'Step 2' },
{ title: 'Step 3' },
{ title: 'Step 4' },
{ title: 'Step 5' },
];
const getSteps = () => {
return steps.map((step, index) => {
const stepProps = {
labelText: step.title,
variant: 'incomplete',
};
if (index + 1 === currentStep) {
stepProps['variant'] = 'active';
} else if (index + 1 < currentStep) {
stepProps['variant'] = 'complete';
}
return (
<ProgressStepper.Step key={step.title} {...(stepProps as StepProps)} />
);
});
};
return (
<>
<ProgressStepper stepStyle="icon" activeStep={currentStep}>
{getSteps()}
</ProgressStepper>
<Flex marginTop="spacingM" gap="spacingXs">
<Button
onClick={() => setCurrentStep(currentStep - 1)}
isDisabled={currentStep <= 1}
>
Previous Step
</Button>
<Button
onClick={() => setCurrentStep(currentStep + 1)}
isDisabled={currentStep > steps.length}
>
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.