View on Git
ProgressIndicator
A progress indicator is a visual representation of a user’s progress through a set of steps
Example
import { ProgressIndicator } from "@seduo/design-system";
...
<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