Système de design GCComposants
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Bouton
<gcds-button>

Autres noms : appel à l’action. Un bouton est un objet interactif qui met l’accent sur une action.
  • GitHub
  • Figma

Aperçu du composant de bouton

Jetez un coup d’œil à ce que font les boutons pour vérifier s’ils permettent de résoudre votre problème. Sélectionnez ensuite le meilleur sous-type, appelé « rôle du bouton », pour le cas d’utilisation dont vous avez besoin.

Problèmes résolus par les boutons

Utilisez un bouton pour lancer une action, comme :
  • Démarrer une tâche ou un flux de travail.
  • Soumettre, enregistrer ou supprimer des données de formulaire.
  • Faire un choix ou donner son consentement.
  • Se connecter à un compte.
  • Avancer ou reculer dans une séquence.

Composants connexes

Liens lorsque vous souhaitez naviguer vers une nouvelle page, un site web, un fichier ou une section de la page actuelle. Détails lorsque vous souhaitez masquer ou afficher une section de contenu.

Choisissez un type de bouton

Le type de bouton change le HTML pour effectuer une tâche précise. Choisissez le type selon la fonction dont vous avez besoin.

Type « Bouton »

Utilisez le type « Bouton » lorsque vous vous attendez à ce qu’une personne :
  • Supprime, copie ou télécharge des renseignements.
  • Choisisse entre deux options.
  • Donne son consentement ou son accord.

Type « Soumission »

Utilisez le type « Soumission » lorsque vous vous attendez à ce qu’une personne :
  • Envoie un formulaire ou une requête.
  • Enregistre des renseignements.
  • Se connecte ou se déconnecte d’un compte.

Type « Réinitialisation »

Utilisez le type « Réinitialisation » lorsque vous vous attendez à ce qu’une personne :
  • Supprime les données saisies dans un formulaire.
Conseil : Utilisez le type « Réinitialisation » avec parcimonie, puisqu’il s’agit d’une action destructive.

Type « Lien »

Utilisez le type « Lien » lorsque vous vous attendez à ce qu’une personne :
  • Se dirige vers une autre page.
  • Se dirige vers un site externe. Une icône de lien externe apparaît à la fin du lien.
Remarque : Utilisez le composant lien pour intégrer un lien dans le texte d’un paragraphe ou d’une barre de navigation.

Choisissez le rôle du bouton

Le rôle d’un bouton modifie son apparence pour indiquer visuellement l’action qu’il déclenche. Choisissez le rôle qui correspond le mieux à cette action.

Aperçu du bouton principal

Soumettre

Bouton principal

  • Actions cruciales au sein d’un processus ou en tant que bouton par défaut.
  • À utiliser une seule fois par page.

Remarque : Si une page comporte plusieurs appels à l’action principaux, il est difficile pour une personne de savoir quoi faire ensuite.

Aperçu du Bouton de démarrage

Bouton de démarrage

Bouton de démarrage

Anciennement le « bouton de super-tâche ».

  • Pour le début d’une tâche ou d’un flux de travail.
  • Plus grand que les autres boutons, donc à utiliser seul et non à côté d’autres boutons.
  • À utiliser une seule fois sur une page.

Conseil : Utilisez soit un bouton principal, soit un bouton de démarrage sur une même page, mais pas les deux.

Aperçu du bouton secondaire

Annuler

Bouton secondaire

  • Pour les actions secondaires.
  • Pour mettre en évidence une action commune et importante, mais non l’action la plus importante.
  • Peut être utilisé plus d’une fois sur une page s’il y a plusieurs options secondaires.

Aperçu du bouton « Danger »

Supprimer

Bouton « Danger »

  • Pour les actions importantes comme supprimer, effacer ou retirer des renseignements.
  • Pour les changements qui peuvent être difficiles à annuler.

Conseil : Pour les actions permanentes, demandez une seconde confirmation afin qu’une personne accepte explicitement l’action avant qu’elle ne soit effectuée.
Aidez-nous à nous améliorer Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact. Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub
2026-07-08