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