Bouton texte
Dernière mise à jour : 15 décembre 2023
Dernière mise à jour : 15 décembre 2023
Le bouton texte permet à l'utilisateur de répondre à un appel à l’action ou de basculer vers un autre contenu. Il a les mêmes fonctions qu'un bouton principal classique, mais son style visuel est plus épuré.
Le bouton texte est utilisé pour des actions complémentaires qui ne requièrent pas une prédominance visuelle. Son libellé doit toujours être juxtaposé à une icône de flèche droite pour bien communiquer son caractère interactif. Le soulignement du texte et de l’icône apparaît au survol.
La flèche droite du bouton texte peut être remplacée par une icône indiquant l'ouverture d'un nouvel onglet. Cette icône est représentée par un encadré et une flèche. Les règles d'utilisation du lien ouvrant un nouvel onglet sont abordées plus loin dans cette page.
Le bouton texte suit les mêmes règles de placement que le bouton principal, mais arrive troisième dans la hiérarchie visuelle. On l'utilise :
Hilo et filiales (exemples : EVLO, Cléo)
Bang the table, LS CODA, SimplyBook.me et autres sites, réseaux sociaux ou plateformes externes
Initiatives ponctuelles (exemple : Énergie en commun)
Site informationnel d'Hydro-Québec, si on y accède à partir de l'Espace client ou d'un formulaire
PDF*, s'il est ouvert à partir de l'espace connecté (Espace client) ou d'un formulaire
PDF*, s'il est ouvert à partir du site informationnel d'Hydro-Québec
Espace client, si on y accède à partir du site informationnel d'Hydro-Québec
Site spécialisé (exemples : maîtres électriciens, enseignants)
Sous-domaine du site d'Hydro-Québec (exemple : emploi.hydroquebec.com)
En tant qu’élément interactif, le bouton texte doit communiquer avec précision l’action à accomplir ou la destination.
Son libellé doit être concis et significatif. On s'abstient donc d'utiliser des formules génériques telles que « En savoir plus ».
Les articles, les déterminants, les pronoms, les adjectifs et les adverbes sont à éviter ou à doser avec parcimonie, sauf si leur utilisation apporte une valeur communicationnelle évidente.
Lorsque le libellé est introduit par un verbe, celui-ci doit toujours être à l’infinitif. Si un pronom ou un déterminant est nécessaire, il faut employer la première personne (exemple : « Me connecter »).
Pas de nombre maximal de caractères, mais le libellé doit demeurer concis.
Idéalement, on vise un maximum de quatre à cinq mots.
Il est composé d'un appel à l'action ou reprend des termes-clés de sa destination.
Le bouton texte à l’état interactif « Défaut » peut utiliser deux couleurs :
La taille du texte utilisée pour le bouton texte est toujours de 16 px. Elle ne varie pas selon les résolutions ou le contexte dans lequel le bouton se trouve.
L'icône qui accompagne le bouton texte est toujours alignée à droite du texte.
Dans les cas où le texte est réparti sur deux lignes, l’icône de flèche droite s’aligne avec le dernier mot du bouton texte.
Lorsque le bouton texte est associé à un lien ouvrant un nouvel onglet, l'icône de flèche droite habituellement utilisée avec ce composant est remplacée par l’icône de nouvel onglet (encadré et flèche).
Voici les différents états interactifs prévus pour le bouton texte :
Défaut
Survol
Clic
Désactivé
Focus