Lesson 4: Variants & Composition — One Component, Many Shapes
You have `PrimaryButton`, `SecondaryButton`, `GhostButton` — three components with the same copy-pasted markup. The PM asks for rounded corners on all of them, and you edit three files. This lesson teaches you to build one `Button` with a `variant` prop that maps to token-based classes — composition
Variants are like a coffee menu: there's one machine, and you pick size and milk. You don't buy a separate machine per drink — you compose what you need from the same parts.
- component variant
- One of several shapes of the same component — `primary`, `secondary`, `ghost` — selected via a prop instead of a separate component per shape.
- variant map
- An object mapping each prop value to its classes (often via `cva`) — a single source of truth for all the component's shapes.
- composition
- Building behavior from composable parts (props, variants) instead of duplicating code — adding a shape is a new map entry, not a new file.
- prop-driven styling
- Choosing the style from prop values (`variant`, `size`) translated into classes — so the component's API describes intent, not a class list.
