Lección 4: Variantes y composición — un componente, muchas formas
Tienes `PrimaryButton`, `SecondaryButton`, `GhostButton` — tres componentes con el mismo markup copiado y pegado. El PM pide bordes redondeados en todos, y terminas editando tres archivos. Esta lección te enseña a construir un solo `Button` con una prop `variant` que se mapea a clases basadas en tok
Las variantes son como un menú de café: hay una sola máquina, y eliges tamaño y tipo de leche. No compras una máquina separada por bebida — compones lo que necesitas a partir de las mismas piezas.
- component variant
- Una de varias formas del mismo componente — `primary`, `secondary`, `ghost` — elegida a través de una prop en vez de un componente separado por forma.
- variant map
- Un objeto que mapea cada valor de prop a sus clases (a menudo con `cva`) — una única fuente de verdad para todas las formas del componente.
- composition
- Construir comportamiento a partir de piezas componibles (props, variantes) en vez de duplicar código — agregar una forma es una nueva entrada en el mapa, no un archivo nuevo.
- prop-driven styling
- Elegir el estilo a partir de valores de prop (`variant`, `size`) traducidos a clases — así la API del componente describe intención, no una lista de clases.
