Les boutons sont des éléments interactifs fondamentaux dans la conception web. Tailwind CSS propose une variété d’utilitaires pour styliser efficacement les boutons et gérer leurs différents états, tels que survol, focus et actif.

Style de base d’un bouton

Pour styliser un bouton de base, il est possible d’utiliser des utilitaires pour la couleur de fond, la couleur du texte, le remplissage, le rayon de bordure et l’épaisseur de police.

Explication

1. bg-yellow-500 : Définit la couleur d’arrière-plan sur une teinte de bleu ;
2. text-white : Définit la couleur du texte sur blanc ;
3. font-bold : Met le texte en gras ;
4. py-2 : Ajoute un espacement vertical (0,5rem ou 8px) ;
5. px-4 : Ajoute un espacement horizontal (1rem ou 16px) ;
6. rounded : Ajoute de petits coins arrondis.

État au survol

Pour modifier l’apparence d’un bouton lorsque l’utilisateur le survole, il est possible d’utiliser le préfixe hover: avec n’importe quelle classe utilitaire.

hover:bg-blue-700 : Modifie la couleur d’arrière-plan en bleu foncé lorsque le bouton est survolé.

État de focus

Pour styliser un bouton lorsqu’il est en focus (par exemple, lorsqu’il est sélectionné à l’aide du clavier), il est possible d’utiliser le préfixe focus: avec n’importe quelle classe utilitaire.

Dans cet exemple, lorsque vous survolez un bouton avec le curseur de la souris, il devient bleu. Si vous utilisez la touche Tab, le bouton deviendra rouge.

États actif et désactivé

Les états actif et désactivé sont utilisés plus rarement. Cependant, il convient également de les prendre en compte.

Pour styliser un bouton lorsqu'il est actif (par exemple, lorsqu'il est cliqué), vous pouvez utiliser le préfixe active: avec n'importe quelle classe utilitaire.

Pour styliser un bouton lorsqu'il est désactivé (par exemple, lorsqu'il ne peut pas être utilisé), vous pouvez utiliser le préfixe disabled: avec n'importe quelle classe utilitaire.

Explication

1. active:bg-green-800 : Modifie la couleur d’arrière-plan en une teinte de vert plus foncée lorsque le bouton est actif (pressé) ;
2. opacity-50 : Réduit l’opacité du bouton pour donner un aspect désactivé ;
3. cursor-not-allowed : Modifie le curseur pour indiquer que le bouton n’est pas cliquable ;
4. Attribut disabled : Rend le bouton non interactif.

Exemple de tous les états

Combinaison de tous les états dans un seul exemple

Explication

1. bg-blue-500 : Définit la couleur d’arrière-plan par défaut ;
2. hover:bg-blue-700 : Modifie la couleur d’arrière-plan au survol ;
3. focus:outline-none : Supprime le contour de focus par défaut ;
4. focus:ring-2 : Ajoute un anneau de focus d’une largeur de 2 pixels ;
5. focus:ring-blue-600 : Définit la couleur de l’anneau de focus ;
6. focus:ring-opacity-50 : Définit l’opacité de l’anneau de focus ;
7. active:bg-blue-800 : Modifie la couleur d’arrière-plan lorsque le bouton est actif ;
8. text-white : Définit la couleur du texte en blanc ;
9. font-bold : Met le texte en gras ;
10. py-2 : Ajoute un espacement vertical ;
11. px-4 : Ajoute un espacement horizontal ;
12. rounded : Ajoute de petits coins arrondis.

Remarque

Pour approfondir le composant bouton de Tailwind, voici un lien vers la documentation officielle.