🎨 Design Systems

Warianty komponentu — co to jest?

Różne wersje tego samego komponentu, które różnią się wyglądem lub zachowaniem, ale zachowują wspólną strukturę. Przykład: przycisk primary, secondary, ghost, destructive.

Jak to działa?

Warianty pozwalają jednemu komponentowi obsługiwać wiele scenariuszy. Przycisk może być primary (główna akcja), secondary (drugoplanowa), ghost (subtelna) albo destructive (usuwanie). Każdy wariant ma inne kolory i style, ale tą samą wielkość, padding i zachowanie. W Figmie przełączasz wariant jednym kliknięciem, a w kodzie zmieniasz prop: variant="secondary".

Dlaczego to ważne?

Dobrze zaplanowane warianty redukują liczbę komponentów w bibliotece i dają designerowi elastyczność bez łamania spójności.