import { ProgressBar } from '@uhg-abyss/mobile';<ProgressBar steps={5} currentStep={2} />useState
In this example, we use the steps prop to define the number of steps available. React's useState hook is used to update the currentStep prop.
ProgressBar Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| currentStep | number | - | Sets current step |
| steps | number | - | Sets number of steps |
ProgressBar Classes
| Class Name | Description |
|---|---|
| abyss-progress-bar-root | Progress bar root element |
| abyss-progress-bar-slide | Progress bar slide |
ProgressBar Translations
| Translation Key | Value |
|---|---|
| ProgressBar.textValue | you are currently on step {{currentStep}} out of {{steps}} |
| ProgressBar.progressBar | Progress bar |
ProgressBar Tokens
| Token Name | Value | |
|---|---|---|
| progress-bar.color.surface.container | #F0F9ED | |
| progress-bar.color.surface.track | #1EA21C | |
| progress-bar.sizing.height.track | 6 |