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 |