Ficha
- Categoría
- Data display
- Nivel
- átomo
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 394:12888
- Fuente
design-system/componentes/ProgressBar.md
Avance por pasos o criterios hacia un total conocido («2 de 3» pasos de una ruta, «3 de 5» criterios revisados). Pista surface/neutral/04-tint; relleno brand primary (en curso) o positive (completado). sm 4 px · md 8 px. Cabecera opcional: Label a la izquierda, Value a la derecha.
Cuándo usarlo
- Barra de foco de AppShell/Foco (sm, sin cabecera), progreso de la ruta y de un módulo, criterios revisados en la calificación.
Cuándo NO usarlo
- Progreso continuo (video, carga, puntaje) → ProgressPercent; anillos → ProgressRing.
Anatomía
Cabecera opcional (body/xs · body/xs-strong) · pista redondeada · relleno como fracción de grilla (repeat(M, 1fr), el relleno ocupa N columnas), igual que en Figma.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
progress | Progress (variante) | «N de M» con M = 3 · 5 · 10 (0–3 de 3, 0–5 de 5, 0–10 de 10) y N ≤ M | — |
label | Label | texto | Avance |
value | Value | texto de la derecha | = progress |
showHeader | Show header | boolean | true |
size | Size | sm (4) · md (8) | sm |
tone | Tone | brand · positive | brand |
Estados
Sin estados interactivos; tone=positive para lo completado.
Accesibilidad
- role=progressbar con aria-valuemin / aria-valuemax / aria-valuenow / aria-valuetext y aria-label; la cabecera lo repite para la vista.
Contenido
Value siempre «N de M»; Label nombra lo que avanza («Ruta Platinum», «Criterios revisados»).
Errores conocidos
- Ninguno medido (test: aria-valuenow / aria-valuemax).
Changelog
- 2026-10-26 · Figma suma
Progress=0…10 de 10(evaluaciones de 10 preguntas, Cowork 3): el código acepta los totales 3 · 5 · 10 y rechaza otros. - 2026-10-26 · nace (T-02) porque AppShell/Foco lo necesita;
progressacepta la misma cadena que la variante de Figma.