Bouton
<gcds-button>

Autres noms : appel à l’action.

Un bouton est un objet interactif qui met l’accent sur une action.

• GitHub
• Figma

Sur cette page

• Codage et accessibilité des boutons
• Exemples
• Générateur de code

Codage et accessibilité des boutons

Évaluez l’accessibilité visuelle

Vérifiez la visibilité de la bordure du bouton par rapport à la surface où vous le placez.

Sélectionnez la bonne taille

Utilisez l’attribut petit bouton pour les actions lorsque l’espace est limité.

Remarque : La hauteur des petits boutons est conforme au niveau AA de la norme WCAG, mais pas au niveau AAA.

Utilisez le bouton désactivé avec discernement

• Utilisez le bouton désactivé de façon judicieuse afin d’indiquer qu’il faut faire quelque chose avant qu’une action puisse être prise.
• Là où c’est possible, utilisez d’autres méthodes d’intervention comme un message d’erreur pour empêcher la soumission de formulaires incomplets.

Dans cette section

• Attributs facultatifs
• Emplacements (slots)

button-id

L'attribut button-id précise le id du bouton.

<gcds-button id="submit-ei-application">
  Soumettre
</gcds-button>

button-role

L'attribut button-role définit le style principal d'un bouton. Les options sont :

• primary (par défaut)
• secondary
• danger
• start

<gcds-button button-role="start">Début</gcds-button>
<gcds-button>Soumettre</gcds-button>
<gcds-button button-role="secondary">Annuler</gcds-button>
<gcds-button button-role="danger">Supprimer</gcds-button>

disabled

L'attribut disabled est un booléen qui contrôle si un bouton est interactif ou non.

<gcds-button button-role="danger" disabled>
  Supprimer
</gcds-button>

name

L'attribut name précise le nom du bouton lors de l'envoi des données du formulaire. Il permet d'identifier quel bouton a déclenché l'envoi du formulaire, notamment lorsque plusieurs boutons sont présents dans un formulaire.

<form action="..." method="post">
  <gcds-button button-role="secondary" name="save-draft" type="submit">Enregistrer le brouillon</gcds-button>
  <gcds-button button-role="secondary" name="submit-application" type="submit">Soumettre le formulaire</gcds-button>
</form>

size

L'attribut size définit la taille du bouton. Les options sont :

• regular (par défaut)
• small

<gcds-button>Taille par défaut</gcds-button>
<gcds-button size="small">Taille petite</gcds-button>

type

L'attribut type définit la fonction du bouton. Les options sont :

• button (par défaut)
• link
• reset
• submit

<gcds-button>Bouton</gcds-button>
<gcds-button type="link">Lien</gcds-button>
<gcds-button type="reset">Réinitialiser</gcds-button>
<gcds-button type="submit"> Soumettre</gcds-button>

value

L'attribut value définit les données envoyées au serveur lorsque le bouton est utilisé pour soumettre un formulaire. Cette valeur n'est transmise que si le bouton a un attribut name et que c'est lui qui a déclenché la soumission. Si plusieurs boutons submit sont présents, seul celui sur lequel l'utilisateur a cliqué envoie sa valeur.

<form action="..." method="post">
  <gcds-button button-role="secondary" type="submit" name="applicationAction" value="save">Enregistrer le brouillon</gcds-button>
  <gcds-button button-role="secondary" type="submit" name="applicationAction" value="submit">Soumettre le formulaire</gcds-button>
</form>

download

L'attribut download indique qu'activer le bouton téléchargera le fichier référencé par l'attribut href, plutôt que d'y naviguer.

Cet attribut fonctionne uniquement lorsque le type du bouton est défini à link.

<gcds-button type="link" href="/files/application-receipt.pdf" download>
  Télécharger le reçu
</gcds-button>

href

L'attribut href définit la destination du lien.

Cet attribut fonctionne uniquement lorsque le type du bouton est défini à link.

<gcds-button type="link" href="https://www.canada.ca/en/services/benefits.html">
  Voir les prestations
</gcds-button>

rel

L'attribut rel définit la relation entre le document actuel et le document lié. Il est souvent utilisé pour des raisons de sécurité et de confidentialité, notamment lorsque les liens s'ouvrent dans un nouvel onglet ou une nouvelle fenêtre.

Cet attribut fonctionne uniquement lorsque le type du bouton est défini à link.

<gcds-button type="link" href="https://www.canada.ca/en/services/benefits.html" target="_blank" rel="noopener noreferrer">
  Voir les prestations
</gcds-button>

target

L'attribut target définit où s'ouvre le lien. Par exemple, il peut ouvrir le lien dans le même contexte de navigation ou dans un nouvel onglet ou une nouvelle fenêtre.

Cet attribut fonctionne uniquement lorsque le type du bouton est défini à link.

<gcds-button type="link" href="https://www.canada.ca/en/services/benefits.html" target="_blank" rel="noopener noreferrer">
  Voir les prestations
</gcds-button>

default

L'emplacement par défaut sert à ajouter le texte du libellé du bouton ou du lien.

<gcds-button>Soumettre</gcds-button>

Générateur de code

Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.

1. Choisissez des valeurs de code pour obtenir l'élément que vous voulez.

2. Obtenez le code et intégrez-le dans votre environnement.

3. Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).

Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.