Variant

2️⃣ Variant Yapısını Doğru Kurgulamak

Örneğin bir Button için:

  • Type → primary | secondary | ghost
  • Size → sm | md | lg
  • State → default | hover | focus | disabled
  • Icon → left | right | none

Ama dikkat ⚠️
Her şeyi variant yapma. Gereksiz combinasyon patlaması olur.

Örnek hata:

type: 4
size: 3
state: 5
icon: 4
= 240 kombinasyon 😅

Gerçekten ihtiyaç olan varyasyonları oluştur.

🔹 Variant Stratejisi

  • Variant explosion nasıl önlenir
  • Boolean property vs variant property
  • State yönetimi modeli
  • Interaction state matrix tasarımı