Variants and State Logic
Day 18 of 30 · The Playbook 2026 – Masterclass for Designers
Define component variants and states in a matrix: size, type, state.
Learning Goal
- Variant matrix: size (sm/md/lg), type (primary/secondary/ghost), state (default/hover/focus/active/disabled/loading).
- State rules: what changes (color, border, shadow, icon).
- Disable/Loading: block interaction, consider skeleton.
- Document examples and bans.
Why This Matters
- Variance without rules breaks systems.
- State logic = affordance.
- Dev can build from a table.
Explanation
- Matrix: rows = states, cols = variants.
- Rule: what does NOT change (radius fixed, type consistent).
- Disabled: lower contrast, default cursor, no shadow.
Examples
Bad: Hover sometimes darkens, sometimes lightens.
Good: Table with fixed colors/shadows per state.
Guided Exercise
- Build a button variant-state table.
- List changes per state.
- Document bans (e.g., ghost+disabled contrast rule).
Independent Exercise
Implement a component from the table; capture each state.
Self-Check
- Matrix done.
- Rules consistent.
- Docs linked.