Ravox KitBasics
Progress
Progress bar with a label and value wired to it. Without a value, it is indeterminate while the remaining amount is unknown. The steps variant shows where the person is in a sign-up, checkout or import.
Armazenamento usado
Settings
Toggles
Examples
File upload
Enviando fotos do produto
Multi-step sign-up
Step 2 of 4: Loja
- Conta (completed)
- Loja (current)
- Pagamento
- Revisão
Unknown remaining time
Conectando ao banco
Goals on a dashboard
Vendas de setembro
Vagas do workshop
Backup de hoje
Installation
The command creates components/ui/progress.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add progressProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | — | From 0 to max. Without a value (or null), the bar is indeterminate. |
| max | number | 100 | Value that fills the bar (e.g. total files). |
| label | ReactNode | — | Text above the bar, which becomes its name for screen readers. |
| showValue | boolean | false | Shows the value on the right of the label. |
| format | (value, max) => string | 42% | Text of the value, also used in aria-valuetext ("3 of 8 files"). |
| thickness | "sm" | "md" | "lg" | "md" | 4, 8 or 12px. |
| color | "default" | "pink" | "yellow" | "lime" | "blue" | "default" | Fill color. The default is the text color. |
| ProgressSteps steps / current | string[] / number | — | Names in order and the index of the current step (0 is the first; steps.length = all done). |
| ProgressSteps showLabels | boolean | true | Name of each step below. In narrow space only "Step 2 of 4: Payment" shows. |