Skip to main content Skip to docs navigation
View on Git

ProgressIndicator

A progress indicator is a visual representation of a user’s progress through a set of steps

Example

examples

<ProgressIndicator step={3} maxStep={6} size="large" aria-label="progress indicator" />
...
<ProgressIndicator step={2} maxStep={5} aria-label="progress indicator" />
...
<ProgressIndicator step={1} maxStep={3} size="small" aria-label="progress indicator" />
{% include "@seduo-design-system/progressIndicator.twig" with { props: {
    step: 3,
    maxStep: 6,
    size: 'large',
    'aria-label': 'progress indicator',
}} %}
...
{% include "@seduo-design-system/progressIndicator.twig" with { props: {
    step: 2,
    maxStep: 5,
    'aria-label': 'progress indicator',
}} %}
...
{% include "@seduo-design-system/progressIndicator.twig" with { props: {
    step: 1,
    maxStep: 3,
    size: 'small',
    'aria-label': 'progress indicator',
}} %}
<ProgressIndicator step={3} maxStep={6} size="large" aria-label="progress indicator" />
...
<ProgressIndicator step={2} maxStep={5} aria-label="progress indicator" />
...
<ProgressIndicator step={1} maxStep={3} size="small" aria-label="progress indicator" />

API

Prop name Type Default Required Description
step number 1 yes current step
maxStep number 1 yes maximum steps in progress bar
valueText string ${step} of ${maxStep} yes aria-valuetext attribute for accessibility
size Size Dictionary medium no size of progress bar
UNSAFE_className string - no Wrapper custom classname
On this page