Design System
GitHub
FigmaPropósito
Controlar la cantidad
Suma o quita packs de un producto sin salir de la pantalla.
Reemplazar a Agregar
Ocupa el mismo slot que el botón Add to cart: comparten forma y altura, así el layout no salta.
Dar feedback claro
Anuncia el valor, bloquea las acciones mientras se actualiza el carrito y respeta mínimos y máximos.
Anatomía
Hacé clic en un número para ver las propiedades y los tokens de esa parte.
Configuración
Tamaño
La prop size define la altura. En card hereda altura y radio del botón Agregar; en carrito y página de producto usa la suya. El área táctil es de 44 px en los tres. Probalo: es interactivo.
32px · Carrito y drawer.
Estado
Hover y foco los resuelve CSS. Mínimo, máximo y loading dependen de las props.
Probá hover y foco con Tab sobre − y +.
Reemplazo de Add to cart
El cambio entre botón y stepper es un cambio de estado del mismo control, no dos componentes distintos.
Agregá un producto y llevá la cantidad a 0 con − para volver al botón.
Tokens
| Token | Valor |
|---|---|
| 1px | |
| 32px | |
| 44px | |
| 12px | |
| 40px | |
| 32px | |
| 500 | |
| #ffffff | |
| #fff1f2 | |
| #ffe1e3 | |
| #1a1a1a | |
| #e30613 | |
| #e30613 | |
| 40px | |
| 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms | |
| 8px |