Primary
Die Hauptaktion eines Bildschirms – nur eine pro Ansicht.
Secondary
Alternative Aktion neben einer Primary – verwendet Grau statt einer Markenfarbe.
Positive
Bestätigt, validiert oder signalisiert einen Erfolg.
Negative
Bricht ab oder löscht – eine destruktive oder unumkehrbare Aktion.
Tertiary
Aktion mit geringer Priorität (z. B. „Mehr erfahren") – nur Text, neutrales Grau.
Best Practices
Nur eine „Primary" pro Ansicht
Gibt es mehrere Buttons auf demselben Bildschirm oder derselben Karte, sollte nur einer die volle „Primary"-Farbe tragen. Die anderen Aktionen werden zu Secondary, Outline oder Tertiary – sonst weiß die Nutzerin nicht mehr, welche Aktion wirklich empfohlen wird.
„Negative" ≠ irgendeine Markenfarbe
Die Rolle „Negative" (endgültig löschen, abbrechen) sollte wirklich destruktiven Aktionen vorbehalten bleiben. Sie für einen harmlosen „Abbrechen"-Button eines Formulars zu verwenden, würde das Auge daran gewöhnen, diese Farbe als neutral zu sehen, und ihr an dem Tag, an dem die Aktion wirklich unumkehrbar ist, ihr Warnsignal nehmen.
Das Attribut „type" setzen
Ein <button> ohne type-Attribut ist standardmäßig type="submit", was ein Formular versehentlich absenden kann. Alle Buttons auf dieser Seite sind explizit type="button"; nur der tatsächliche Absende-Button eines Formulars sollte type="submit" tragen.