Bouton

Le bouton, inséré à l’aide du code « button », sert à exécuter une action dans un flux de travail, à mettre en évidence un lien ou à demander une action. Voir l’aide-mémoire pour les paramètres.

Pratiques exemplaires

  • Utiliser des verbes d’action parlants.
  • Au besoin, ajouter des mots pour clarifier l’action.
  • Formuler une phrase complète pour faciliter la lecture.

Exemple

Par défaut, le bouton comporte un message en texte clair.

<button type="button" class="bocss-button bocss-button--primary">
    Exemple de bouton
</button>

Code simplifié


                [Button message="Exemple de bouton"]
            

Type

Choisir un type d’action pour un bouton.

<button type="button" class="bocss-button bocss-button--primary">
    Bouton par défaut
</button>
<button type="submit" class="bocss-button bocss-button--primary">
    Bouton Soumettre
</button>
<button type="reset" class="bocss-button bocss-button--primary">
    Bouton Réinitialiser
</button>

Code simplifié


                [Button message="Bouton par défaut" type="button"]
            
                [Button message="Bouton Soumettre" type="submit"]
            
                [Button message="Bouton Réinitialiser" type="reset"]
            

Styles

Appliquer un style pour modifier la couleur du bouton.

<button type="button" class="bocss-button bocss-button--primary">
    Style primaire
</button>
<button type="button" class="bocss-button bocss-button--secondary">
    Style secondaire
</button>
<button type="button" class="bocss-button bocss-button--tertiary">
    Style tertiaire
</button>
<button type="button" class="bocss-button bocss-button--success">
    Style Réussi/Succès
</button>
<button type="button" class="bocss-button bocss-button--destruct">
    Style Détruire
</button>

Code simplifié


                [Button message="Style primaire" style="primary"]
            
                [Button message="Style secondaire" style="secondary"]
            
                [Button message="Style tertiaire" style="tertiary"]
            
                [Button message="Style Réussi/Succès" style="success"]
            
                [Button message="Style Détruire" style="destruct"]
            

Tailles

Il y a deux tailles de bouton : petit et gros.

<button type="button" class="bocss-button bocss-button--primary bocss-button--small">
    Petit bouton
</button>
<button type="button" class="bocss-button bocss-button--primary bocss-button--large">
    Gros bouton
</button>

Code simplifié


                [Button message="Petit bouton" size="small"]
            
                [Button message="Gros bouton" size="large"]
            

Pleine largeur

Il est possible d’étendre le bouton à toute la largeur de l’élément qui le contient.

<button type="button" class="bocss-button bocss-button--primary bocss-button--full">
    Bouton pleine largeur
</button>

Code simplifié


                [Button message="Bouton pleine largeur" full="true"]
            

Paramètres

Paramètre Valeurs Description
message définie par l’utilisateur Texte du bouton
type button, submit, reset Type du bouton
style primary, secondary, tertiary, success, destruct Styles du bouton (principalement des couleurs)
size small, large Taille de la surface cliquable du bouton
full true, false Pour étendre le bouton à toute la largeur de l’élément qui le contient
params définie par l’utilisateur Paramètre de requête à ajouter à l’URL vers lequel pointe le bouton
post_id définie par l’utilisateur ID de la page ou de la publication vers laquelle pointe le bouton
url définie par l’utilisateur URL du site externe vers lequel pointe le bouton
id définie par l’utilisateur ID HTML du bouton
name définie par l’utilisateur Nom HTML du bouton