B · ComponentsIntermediate50 min read
7. Variants & component properties
Figma · 52 pages source format
Variants collapse related components into one set with properties (size, state, type). This is how real design systems scale.
What you'll learn
- Variant properties
- Component properties
- Boolean props
- Instance swap
Button variant set
Properties: Type=Primary|Secondary, Size=Sm|Md|Lg, State=Default|Hover|Disabled.
Do this now
One button component set with 12 variants (or sensible subset).
Clear?
Input states
State=Default|Focus|Error|Disabled. Swap helper for error message via variant or boolean.
Do this now
Input variant set with 4 states on login form instances.
Clear?
Icon instance swap
Component property for leading/trailing icon swap without detaching.
Do this now
Add icon slot to button via instance swap property.
Clear?