Button actions¶

Boutons contenus¶

Appel à l’action (CTA)¶

Un bouton d’appel à l’action (CTA), selon la situation, invitera généralement les utilisateurs à s’inscrire/acheter maintenant/etc.

<button type="button" class="primary radius">CTA</button>

Principal¶

Utilisez celui-ci comme principal appel à l’action sur les interfaces.

<button type="button" class="primary">Principal</button>

Secondaire¶

Pour les actions secondaires. Excellent pour garder un œil sur les images principales d’une page. Avec un arrière-plan bien choisi et une bordure contrastante bien soulignée, le bouton secondaire attire l’attention sans donner une impression écrasante à l’utilisateur.

<button type="button" class="secondary">Secondaire</button>

Tertiaire¶

Utilisez des boutons tertiaires, pour des actions moins importantes, ou associés à un bouton principal ou secondaire, ou plusieurs CTA autour du même sujet.

<button type="button" class="tertiary">Tertiaire</button>

Boutons avec bordures¶

Boutons avec bordures affiche un trait autour d’une étiquette de texte.

<button type="button" class="primary-outline radius">CTA</button>
<button type="button" class="primary-outline">Principal</button>
<button type="button" class="secondary-outline">Secondaire</button>
<button type="button" class="tertiary-outline">Tertiaire</button>
<button type="button" class="danger-outline">Danger</button>
<button type="button" class="info-outline">Info</button>
<button type="button" class="success-outline">Succès</button>
<button type="button" class="warning-outline">Avertissement</button>