Bouton

Les boutons servent aux commandes explicites. Utilisez des libellés clairs ou des icônes familières, gardez les zones de clic stables et réservez les styles plus forts aux actions prioritaires. Il n’existe pas de classe .button partagée à poser dans le balisage : chaque contexte définit toujours sa propre classe dans assets/css/site.css, et toutes partagent une même forme — un libellé en majuscules ou en gras, une bordure carrée et un survol en couleur d’accent. Quatre de ces classes — home-hero-button, form-submit, table-sort-button/talks-sort-button et pagination-button — composent en interne, dans la feuille de style, une primitive partagée .btn-base (inline-flex items-center font-[700] transition-colors), ce qui écrit une seule fois la disposition et le comportement d’interaction qu’elles ont réellement en commun. La bordure, le remplissage, les marges internes et les majuscules restent propres à chaque classe, car ils diffèrent volontairement. filter-chip/anchor-index-link (forme de pastille alignée à la ligne de base) et copy-markdown-button (icône seule, basé sur l’opacité) forment une famille visuelle distincte et n’utilisent volontairement pas .btn-base.

Quand l’utiliser#

• Utilisez un bouton pour une commande explicite — soumettre, trier, filtrer, copier — quelque chose qui agit sur la page courante
• Stylez un lien en bouton seulement lorsqu’il est l’appel à l’action de la page; la navigation ordinaire reste un lien texte
• Utilisez des libellés clairs ou des icônes familières; le libellé nomme la commande, pas le mécanisme
• Gardez les zones de clic stables — un changement d’état comme un filtre actif ou une direction de tri peut restyler le bouton, mais ne doit pas le redimensionner
• Réservez les styles pleins (accent ou encre) à la seule action prioritaire; les actions d’accompagnement prennent le style à contour

Implémentation#

<div class="home-hero-actions">
  <a class="home-hero-button home-hero-button-primary" href="/fr/contact/">Discutons</a>
  <a class="home-hero-button home-hero-button-secondary" href="/fr/about/">En savoir plus</a>
</div>

<button type="submit" class="form-submit">Envoyer le message</button>

Tout le style des boutons vient de classes de composants dans assets/css/site.css; il n’y a ni partiel de bouton ni JavaScript qui lui soit propre. Un élément <button> porte type="button" sauf s’il soumet un formulaire, et les contrôles à état exposent leur état par des attributs que le CSS style directement : aria-pressed sur les filter chips, aria-sort sur les en-têtes de colonnes des tables et aria-current sur le numéro de page actif.

Variantes#

Les deux variantes home-hero-button-* étendent la base home-hero-button. home-hero-button, form-submit, table-sort-button/talks-sort-button et pagination-button composent toutes en interne la primitive partagée .btn-base; filter-chip filter-chip-button et copy-markdown-button restent des familles visuelles autonomes.

Accessibilité#

• Chaque commande est un <button> natif — soumettre, filtrer, trier, copier — donc Entrée et Espace l’activent sans gestion de touches scriptée; les deux appels à l’action du héros sont des éléments <a> et s’activent avec Entrée
• L’état passe par des attributs standards que les scripts gardent à jour : aria-pressed sur les filter chips, aria-sort sur l’en-tête de colonne <th> qui contient un bouton de tri et aria-current="page" sur le numéro de page actif
• Le bouton à icône seule copy-markdown-button porte un aria-label, un title correspondant et un <span> sr-only; ses deux images d’icône sont aria-hidden avec un alt vide
• Le focus reste où la personne l’a mis — les scripts n’écoutent que click et ne déplacent jamais le focus
• Évitez de construire une commande avec un <div> ou un <span> cliquable; seul l’élément natif donne l’activation au clavier et le rôle button