Warianty i API komponentu
API komponentu to zbiór propsów (właściwości) definiujących wygląd i zachowanie. Dobrze zaprojektowane API jest intuicyjne, spójne i elastyczne.
Co to jest?
API komponentu (Component API) to interfejs, przez który użytkownicy DS kontrolują zachowanie i wygląd komponentu. W kodzie to props (React) lub attributes (Web Components). W Figmie to Component Properties. API definiuje: warianty (variant: primary | secondary), rozmiary (size: sm | md | lg), stany (disabled, loading), sloty (children, icon, label) i zdarzenia (onClick, onChange).
Jak to działa?
Dobrze zaprojektowane API komponenty jest przewidywalne — jeśli Button ma prop size="sm", to Input też powinien. Spójne nazewnictwo (variant, size, disabled) między komponentami ułatwia naukę i zapobiega błędom. API powinno być minimalne (móc dużo z małą liczbą propsów) i kompozycyjne (małe propsy łączone w moc komponentów).
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Primer GitHub stosuje spójne API: każdy komponent ma variant, size i sx (custom styles). Paste Twilio używa systemu primitives z composable API. Ant Design definiuje API z pełnym typowaniem TypeScript i JSDoc.