import { ProgressBar } from '@uhg-abyss/mobile';() => { return <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
| Name | Type | Default | Required | 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 |