Composant UI : définition, exemples et erreurs à éviter
Composant UI : définition simple, rôle du bouton, de la card et de l'input, fonctionnement en React et erreurs à éviter pour un site cohérent et rapide.
Composant UI : la définition
Un composant UI (user interface) est une brique visuelle et fonctionnelle autonome, qu'on assemble pour construire les pages d'un site ou d'une application. Le bouton, la card et le champ de saisie sont les exemples les plus courants. Chacun regroupe son apparence, son comportement et ses règles d'accessibilité. On le crée une seule fois, puis on le réutilise sur tout le site.
C'est la partie visible du front end, celle que vos clients touchent. Elle se situe à la croisée du design et du code, ce que l'on détaille dans notre article sur l'UX et l'UI.
À quoi servent les components d'une interface
Pour un dirigeant, l'intérêt est concret. Des components bien pensés évitent que chaque page soit refaite à la main, avec ses petites différences de couleur ou de taille.
- <strong>Cohérence</strong> : chaque bouton a le même style, la même couleur et le même comportement.
- <strong>Rapidité</strong> : une nouvelle page s'assemble à partir de briques prêtes.
- <strong>Maintenance</strong> : on modifie le composant une fois, le changement s'applique partout.
- <strong>Accessibilité</strong> : les attributs aria et la gestion du clavier sont intégrés d'office.
Les trois composants de base
Le bouton (button)
Le button déclenche une action : envoyer un formulaire, ajouter au panier, réserver. Il porte souvent votre appel à l'action. Il doit afficher ses états clairement, du survol au clic, comme l'explique notre page sur l'état focus d'un bouton.
La card
La card présente un contenu en bloc : un produit, un article, un service. Elle réunit image, titre, texte court et lien. Sur une page de catalogue, c'est elle qui fait vendre.
Le champ de saisie (input)
L'input recueille une donnée : email, téléphone, message. Un bon composant affiche une étiquette visible, un message d'erreur compréhensible et reste lisible sur mobile.
Comment fonctionne un component dans le code
Avec React, Vue ou d'autres frameworks, un component est un petit bloc de code qui reçoit des paramètres. Le même bouton peut ainsi s'afficher en version principale ou secondaire, avec le texte que vous voulez. Le style vient d'un thème commun, souvent écrit avec Tailwind.
Beaucoup d'équipes partent d'une library existante, comme Material UI, Element UI ou shadcn/ui, puis l'adaptent à leur identité. On gagne du temps, mais il faut savoir ce que l'on copie dans son produit.
Les erreurs courantes
- Dupliquer un composant au lieu de le réutiliser, ce qui crée de la dette technique.
- Importer une library entière pour trois boutons, et alourdir le site.
- Oublier l'accessibilité : contraste, focus, labels, exigés par le RGAA.
- Sauter la phase de wireframe et dessiner les composants sans penser aux parcours.
Lors d'une création de site internet, poser une bibliothèque de composants dès le départ évite ces pièges et facilite chaque évolution.
Questions fréquentes
C'est une fonction qui renvoie un morceau d'interface, par exemple un bouton ou une card. Elle reçoit des paramètres, appelés props, pour adapter son texte ou sa variante. On l'appelle ensuite partout où l'on en a besoin.
Le composant est une brique isolée. Le UI kit est une collection de composants cohérents entre eux, avec des couleurs, des typographies et des règles communes. Un design system va plus loin en documentant leur usage.
Oui pour démarrer vite, à condition de l'adapter à votre marque. Vérifiez qu'elle est maintenue, accessible et légère. Sinon, votre site risque de ressembler à tous les autres et de ralentir.
