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.
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 une 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.
Type « Lien »
Utilisez le type « Lien » lorsque vous vous attendez à ce qu'une personne :
- Se dirige vers d'autres pages ou sites externes.
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 du bouton change son apparence afin de signaler visuellement l'action qui se produira. Choisissez le rôle qui correspond le mieux à l'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.
Conseil : La présence de plus d'un bouton principal d'action sur une même page fait en sorte qu'il est plus difficile pour une personne de savoir ce qu'elle doit faire ensuite.
Aperçu du Bouton de démarrage
Bouton principal
Anciennement le « bouton de super-tâche ».
- 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 : La présence de plus d'un bouton principal d'action sur une même page fait en sorte qu'il est plus difficile pour une personne de savoir ce qu'elle doit faire ensuite.
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 signaler des actions conséquentes comme la suppression ou la réinitialisation de renseignements.
- Les changements qui s'exécutent peuvent être difficiles à renverser.
Conseil : Pour les actions permanentes, confirmez deux fois l'action afin qu'une personne accepte explicitement de la poursuivre.
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