Design System
GitHub
FigmaPropósito
Mostrar avance
Indica cuánto falta para completar algo, como el mínimo de compra.
Estados
Neutral, success y error cambian pista y relleno.
Accesible
role="progressbar" con valor actual.
Anatomía
Cada número es una parte del componente real: hacé clic para ver sus propiedades y tokens.
Hacé clic en un número para ver las propiedades y los tokens de esa parte.
Configuración
El componente real, en vivo.
Estado
La prop state. El relleno del estado neutral usa el color sólido de error, tal como está en el CSS de la tienda.
state="neutral".
Tamaño
La prop size: md (10 px) o sm (6 px).
size="md".
Valor
El valor va de 0 a 100 y se limita automáticamente.
value=0.
Tokens
Los tokens globales que usa el CSS real del componente.
| Token | Valor |
|---|---|
| 10px | |
| 9999px | |
| #e4e4e4 | |
| 6px | |
| #dc2626 | |
| 300ms | |
| cubic-bezier(0.4, 0, 0.2, 1) | |
| #f0fdf4 | |
| #16a34a | |
| #fef2f2 |