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