Variants and State Logic

Learning Goal

To understand and define component variants and states in a matrix: size, type, state.

Who

Designers, Developers, and Product Managers.

What

• 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 it matters

• Variance without rules breaks systems.
• State logic = affordance.
• Dev can build from a table.

How

1. Matrix: Rows = states, cols = variants.
2. Rule: what does NOT change (radius fixed, type consistent).
3. Disabled: lower contrast, default cursor, no shadow.

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.

Bibliography (sources used)

...

Read more (optional)

...