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>

style

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>

size

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>

full

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
html_id définie par l’utilisateur ID HTML du bouton
icon définie par l’utilisateur Icône à afficher
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