Simple progress bar
Examples
Check out the Usage section for details about how to design a Simple progress bar properly, and the different configuration options we provide.
Basic Example
You can display a bar that indicates how far a process has progressed.
<SimpleProgressBar
completed={25}
total={100}
/>
Usage
Coming soon.
Code
<SimpleProgressBar
completed={25}
total={100}
/>
Import statement
import { SimpleProgressBar } from '@jutro/components';
Component contract
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
Properties
completedrequired- Type
numberDescriptionNumber of steps that were completed.
totalrequired- Type
numberDescriptionTotal number of steps.
className- Type
stringDescriptionClass to override the whole component styles.
hideLabel- Type
boolDescriptionHides the label. If you need to make the component be without a label and accessible, provide the label prop and set hideLabel to true -> aria-label attribute will be set to label.
Default valuefalse
label- TypeDescription
Label of the progress bar.
labelPosition- Type
'top' | 'bottom'DescriptionAllows you to select the position of the progress bar label.
showPercentageProgress- Type
boolDescriptionIf true, shows percentage progress instead of fractions.
showProgressLabel- Type
boolDescriptionShows progress label.
iddeprecated- Type
stringDescriptionA unique ID for this element.
pathdeprecated- Type
stringDescriptionHint path to value.
progressBarClassNamedeprecated- Type
stringDescriptionClass to override the progress bar styles.
stepClassNamedeprecated- Type
stringDescriptionClass to override the progress bar step styles.
valuedeprecated- Type
numberDescriptionNumber of steps that were completed when used with path.
Hooks
No hooks are available for SimpleProgressBar.
Translation keys
There are no translations for SimpleProgressBar.
For information on how to manage translations, see our section about Internationalization.
Escape Hatches
For more information, see our documentation about escape hatches.