Progressbar
component provides a flexible and visually appealing way to display progress towards a completion goal in your application.
Variant
Size
Usage
- When using the ProgressBar component, it is important to display labels that give users a clear understanding of the processes taking place
import { Progressbar } from "@momo-webplatform/mobase";<Progressbar value={40} variant="progress" size="medium" />API Reference
Progress
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
value | number | -- | false |
max | number | -- | false |
getValueLabel | (value: number, max: number) => string | -- | false |
variant | enumprogress | success | disabled | empty | progress | false |
size | enumsmall | medium | large | medium | false |
disabled | enumboolean | false | false |
Best practices
- Status:
- Success: The success status shows that the process has ended and completed.
- Progress: The progress status shows that the update process is in progress.
- Disabled: The success status shows that the process has ended.
- Success: The success status shows that the process has ended and completed.