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.

Type

Choisir un type d’action pour un bouton.


                        [Button message="Bouton par défaut" type="button"]
                    

                        [Button message="Bouton Soumettre" type="submit"]
                    

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

Styles

Appliquer un style pour modifier la couleur du bouton.


                        [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"]
                    
<button type="button" class="bocss-button bocss-button--primary bocss-button--small">
        Style primaire
</button>
<button type="button" class="bocss-button bocss-button--secondary bocss-button--small">
        Style secondaire
</button>
<button type="button" class="bocss-button bocss-button--tertiary bocss-button--small">
        Style tertiaire
</button>
<button type="button" class="bocss-button bocss-button--success bocss-button--small">
        Style Réussi/Succès
</button>
<button type="button" class="bocss-button bocss-button--destruct bocss-button--small">
        Style Détruire
</button>

Tailles

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


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

                        [Button message="Gros bouton" size="large"]
                    
<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>

Pleine largeur

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


                        [Button message="Bouton pleine largeur" full="true"]
                    
<button type="button" class="bocss-button bocss-button--primary bocss-button--small bocss-button--full">
        Bouton pleine largeur
</button>

Paramètres

Paramètre Valeurs Description
full true, false Pour étendre le bouton à toute la largeur de l’élément qui le contient
icon définie par l’utilisateur Icône à afficher
id définie par l’utilisateur ID HTML du bouton
message définie par l’utilisateur Texte du bouton
name définie par l’utilisateur Nom HTML du bouton
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
size small, large Taille de la surface cliquable du bouton
sr_message définie par l’utilisateur Message pour lecteur écran
style primary, secondary, tertiary, success, destruct Styles du bouton (principalement des couleurs)
type button, submit, reset Type du bouton
url définie par l’utilisateur URL du site externe vers lequel pointe le bouton