Design System
GitHub
FigmaPropósito
Etiquetar
Marca un producto con una característica corta: descuento, dieta, premium.
Contar
Muestra una cantidad sobre un ícono o junto a un título.
No es una acción
Un badge informa, no se presiona. Para acciones usá un Button.
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.
Variante
La prop variant define colores, radio y tipografía. Discount y dietary usan radio de 4 px para no competir con los CTA pill; counter es redondo.
Descuento sobre un producto. Borde y texto en tomato sobre blanco.
Contador sobre un ícono
El counter se posiciona sobre el ícono que cuenta; la posición la define el componente que lo contiene.
Carrito
Contador de 16 px con número de 11 px en negrita.
Props
| Prop | Tipo | Descripción |
|---|---|---|
| variantrequerida | "discount" | "dietary" | "counter" | "outline" | Colores, radio y tipografía. |
| className | string | Clases extra. |
Tokens
Se leen en vivo del paquete de tokens.
| Variante | Token | Valor |
|---|---|---|
| Counter | 16px | |
| Discount | 4px | |
| Discount | 6px | |
| Discount | 6px | |
| Discount | 12px | |
| Discount | 700 | |
| Dietary | 4px | |
| Dietary | 12px | |
| Counter | 9999px | |
| Counter | 11px | |
| Discount | #ffffff | |
| Discount | #e30613 | |
| Discount | #e30613 | |
| Dietary | #15803d | |
| Dietary | #ffffff | |
| Counter | #e30613 | |
| Counter | #ffffff |