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" />
...
<ProgressIndicator step={2} maxStep={5} />
...
<ProgressIndicator step={1} maxStep={3} size="small" />
{% include "@seduo-design-system/progressIndicator.twig" with { props: {
    step: 3,
    maxStep: 6,
    size: 'large'
}} %}
...
{% include "@seduo-design-system/progressIndicator.twig" with { props: {
    step: 2,
    maxStep: 5,
}} %}
...
{% include "@seduo-design-system/progressIndicator.twig" with { props: {
    step: 1,
    maxStep: 3,
    size: 'small'
}} %}
<ProgressIndicator step={3} maxStep={6} size="large" />
...
<ProgressIndicator step={2} maxStep={5} />
...
<ProgressIndicator step={1} maxStep={3} size="small" />

API

Prop name Type Default Required Description
step number 1 yes current step
maxStep number 1 yes maximum steps in progress bar
size Size Dictionary medium no size of progress bar
UNSAFE_className string - no Wrapper custom classname
On this page