1. Beschriftung
2. Grafik (optional)

Es wird zwischen primären, sekundären und tertiären Buttons unterschieden. Eine Seite / ein Formular / eine Meldung enthält in der Regel einen primären Button, der die Hauptaktion beschreibt. Alle weiteren Buttons werden je nach dem, auf welche Aktionen die Aufmerksamkeit der Nutzenden geleitet werden soll, als sekundäre oder tertiäre Buttons dargestellt. 
Tertiäre Buttons müssen immer ein Icon enthalten, damit sichergestellt ist, dass das Element als klickbar und interaktiv erkannt wird.

Bei einer Reihe von Buttons ist die Reihenfolge nach Wichtigkeit geordnet. Der primäre/wichtigste Button befindet sich immer ganz rechts.

Der Text innerhalb eines Buttons beschreibt so kurz und verständlich wie möglich die Aktion, die nach Klicken ausgeführt wird.

Falls eine zusätzliche Beschreibung vorhanden ist, wird diese in einem Tooltip angezeigt. Der erste Buchstabe des Buttontextes wird immer groß geschrieben. Sollte ein Buttontext länger sein, als im verfügbaren Platz darstellbar ist, so bricht der Text um und wird mehrzeilig. Der Button vergrößert sich dann entsprechend. Bei primären und sekundären Buttons ist der Text zentriert zum Button auszurichten. Bei tertiären Buttons ist der Text linksbündig gesetzt.

Bei Buttons mit Text und Grafik muss die Aktion ausschließlich aus dem Text erkenntlich sein.

Die Klickfläche eines Buttons (egal ob primär/sekundär/tertiär, Text/Icon) darf 40x40px nicht unterschreiten.

Die Breite von Textbuttons passt sich an die Länge des Textinhalts an (16 Pixel Abstand rechts und links von Text zu Button) Die minimale Breite von Textbuttons beträgt 80 Pixel. Die minimale Breite gilt nicht für Buttons, die ausschließlich ein Icon enthalten.

Buttons können auf hellem oder dunklem Hintergrund liegen. Ein dunkler Hintergrund kommt beispielsweise bei allen Arten von Meldungen vor. Sekundäre Buttons haben keine Hintergrundfarbe, so dass sie die Farbe des Hintergrundes annehmen, auf dem sie platziert werden.

Werden Buttons auf rotem Hintergrund verwendet (beispielsweise in Fehler-Modaldialogen), so wird die Farbe Hellblau (Verwendet bei Fokus-Rahmen und Hover-State) zu #FFE5E5 geändert.

Die Grafik in Buttons muss als Layoutgrafik definiert werden. Für reine Grafikbuttons muss eine aussagekräftige textuelle Beschreibung hinterlegt werden, die automatisch auch als Tooltip des Buttons angezeigt wird.

• Ist das vorherige Element fokussiert, so wird mit Drücken auf die Tab-Taste der Button fokussiert
• Enter oder Leertaste führt die Aktion aus
• Der erneute Klick auf die Tab-Taste fokussiert das nächste interaktive Element

• Durch klicken mit der linken Maustaste wird die Aktion ausgeführt