Ficha
- Categoría
- Data display
- Nivel
- átomo
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 442:29747
- Fuente
design-system/componentes/ProgressPercent.md
Avance continuo en pasos de 10 % (video visto, carga, completitud). Misma anatomía que ProgressBar: pista surface/neutral/04-tint; relleno brand primary o positive; sm 4 px · md 8 px; cabecera opcional con Label y Value («54 %»).
Cuándo usarlo
- Valores continuos donde el conteo exacto de pasos no importa: avance del video de apertura, carga de un archivo.
Cuándo NO usarlo
- Pasos o criterios con total conocido → ProgressBar.
Anatomía
Cabecera opcional (body/xs · body/xs-strong) · pista redondeada · relleno como fracción de grilla en décimos (como la variante de Figma).
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
label | Label | texto | Avance |
valueText | Value | texto | 50% |
showHeader | Show header | boolean | true |
size | Size | sm · md | sm |
tone | Tone | brand · positive | brand |
value | Progress | 0% · 10% · 20% · 30% · 40% · 50% · 60% · 70% · 80% · 90% · 100% | 0% |
Estados
Sin estados.
Accesibilidad
- role=progressbar con aria-valuenow 0–100 y nombre; la cabecera repite el valor para la vista.
Contenido
Value con unidad («54 %»); Label nombra lo que avanza.
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 ·
valueTexttambién va en aria-valuetext («9 de 16 pasos» en Mi ruta), no solo en la cabecera (T-04). - 2026-10-26 · nace (T-02).