componente · @solu30/ui-kit/display
ProgressBar
El componente, montado
Cargando el espécimen…
Cargando el chunk del paquete instalado…
De dónde se importa
import { ProgressBar } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| value | opcional | number | Progress value from 0 to 100. OMITIRLO = INDETERMINADO (2026-08-17): la barra pasa a un modo continuo que comunica "esto está en curso" sin afirmar cuánto falta. Es la semántica del `<progress>` nativo y de ARIA, donde la ausencia de `aria-valuenow` es precisamente lo que significa indeterminado — por eso se modela como opcional y no como un flag aparte: no hay que inventar un número para decir que no se sabe. El caso que lo pidió: Luigi necesitaba una barra de navegación global (ADR PERF-001 §R9) y una navegación no sabe cuánto le falta. Con `value` obligatorio, la única salida era inventar progreso con temporizadores, o sea mentirle al usuario; prefirieron quedarse sin indicador. |
| size | opcional | ProgressBarSize | Height of the bar |
| color | opcional | ProgressBarColor | Color variant |
| showLabel | opcional | boolean | Show percentage label |
| className | opcional | string | Additional CSS class |
| barClassName | opcional | string | Additional CSS class for the fill bar |
| trackClassName | opcional | string | Additional CSS class for the track (overrides bg and height defaults) |
Ejemplo del paquete
<ProgressBar value={75} />
<ProgressBar value={100} color="success" size="lg" showLabel />
<ProgressBar value={30} color="warning" size="sm" />
<ProgressBar /> // indeterminado: "en curso", sin cuánto falta
<ProgressBar aria-label="Cargando la página" />Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.