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
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
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
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 »
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