Challenge 3: Organizing Button States With Variants — Solution Walkthrough

The answer:

Per this chapter's own material, Variants group several related
components — here, a button's default, hover, and disabled states —
into one single switchable component set, with a property (such as
"State") that switches between them. Rather than three unrelated
components floating separately in the file, all three states live
together as one organized, logical unit.

Why this is preferable to three entirely separate components:

Three separate, unrelated components would need to be independently
found, maintained, and kept visually consistent with each other by
hand — any shared change (like padding or font) would need to be
applied to each one individually, with no guarantee they'd stay in
sync. Grouping them as Variants keeps them organized together and
makes switching between states (in a prototype, for instance) a matter
of changing one clean property rather than swapping out entirely
different components.

Why this connects to the rest of the chapter:

Variants build directly on the main component/instance model already
described — each variant is still ultimately a component with its own
instances, just grouped alongside its related states rather than
existing in isolation.

WHY THIS WORKS AS AN ANSWER
------------------------------
This exercise checks that Variants are correctly understood as
organizing related components into one switchable set, and that this
organizational benefit is distinguished from simply having several
unrelated separate components.