Primary
L'action principale d'un écran — une seule par vue.
Secondary
Action alternative, à côté d'une primaire — utilise le gris plutôt qu'une couleur de marque.
Positive
Confirme, valide, ou signale un succès.
Negative
Annule ou supprime — une action destructive ou irréversible.
Tertiary
Action de faible priorité (ex. « en savoir plus ») — texte seul, gris neutre.
Bonnes pratiques
Un seul « primary » par vue
S'il y a plusieurs boutons dans un même écran ou une même carte, un seul doit porter la couleur pleine « primary ». Les autres actions passent en secondary, outline, ou tertiary — sinon l'utilisateur ne sait plus laquelle est réellement recommandée.
Negative ≠ n'importe quelle couleur de marque
Le rôle « negative » (supprimer, annuler définitivement) doit rester réservé à des actions réellement destructives. L'utiliser pour un simple bouton « annuler » d'un formulaire anodin habituerait l'œil à voir cette couleur comme neutre, et lui ferait perdre son signal d'alerte le jour où l'action est vraiment irréversible.
Typer l'attribut type
Un <button> sans attribut type vaut par défaut type="submit", ce qui peut déclencher l'envoi d'un formulaire par accident. Tous les boutons de cette page sont explicitement type="button" ; seul le vrai bouton d'envoi d'un formulaire doit porter type="submit".