Un composant global (Global component) est un composant réutilisable au sein d’une application spécifique qui consomme et « enrobe » des composants universels en leur imposant des contraintes de design et de comportement propres au projet.
Caractéristiques :
- Restreint la personnalisation : Il réduit le nombre de
propsdisponibles pour garantir une cohérence visuelle et fonctionnelle à travers toute l’application. - Intègre la charte graphique : Il applique les couleurs, polices, espacements et animations définis par le design system de l’entreprise.
- Peut contenir une logique légère : Il peut inclure des comportements spécifiques à l’application (ex: un bouton « Valider » qui déclenche un événement analytics).
Exemple :
Un composant PrimaryButton qui utilise ButtonBase en fixant variant="primary" et size="large", et qui ajoute un attribut data-track pour le suivi des clics. Il est réutilisable dans toute l’application, mais pas en dehors.
À retenir :
C’est l’équivalent des « molécules » ou « organismes » dans Atomic Design, qui donnent une identité visuelle cohérente.