Figma
OpenCodeButton
Synonyme: Schaltfläche, Befehlsschaltfläche, Schalter, Push Button
Ähnliche Komponenten: Link
Kurzbeschreibung
Ein Button löst eine Aktion aus, seine Beschriftung benennt diese Aktion.
Beispiele
Varianten
Code anzeigen
<button type="button" class="kern-btn kern-btn--primary">
<span class="kern-label">Primary Button</span>
</button>
<button type="button" class="kern-btn kern-btn--secondary">
<span class="kern-label">Secondary Button</span>
</button>
<button type="button" class="kern-btn kern-btn--tertiary">
<span class="kern-label">Tertiary Button</span>
</button>Varianten mit Icon
Code anzeigen
<button class="kern-btn kern-btn--primary">
<span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
<span class="kern-label">Primary Button</span>
</button>
<button class="kern-btn kern-btn--secondary">
<span class="kern-label">Secondary Button</span>
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
</button>
<button class="kern-btn kern-btn--tertiary">
<span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
<span class="kern-label kern-sr-only">Bearbeiten</span>
</button>
Block-Button für mobilen Kontext
Code anzeigen
<button class="kern-btn kern-btn--block kern-btn--primary">
<span class="kern-label">Primary Block</span>
</button>Beschreibung
Mit einem Button können User eine Aktion auslösen. Diese Aktionen können Bestätigungen, das Absenden von Informationen, das Ändern von Daten oder der Übergang zu einem nächsten Prozessschritt sein. Ein Button enthält eine Beschriftung (Label), die die auszuführende Aktion knapp und präzise beschreibt. Zur visuellen Unterstützung können Buttons auch Icons enthalten.
Verwendungsregeln
Für eine konsistente Nutzerführung bieten wir drei verschiedene Button-Kategorien an, die sich in ihrer Wichtigkeit unterscheiden:
- Primär
- Sekundär
- Tertiär
Die wesentliche Funktion einer Seite oder Ansicht wird mit dem Primären Button ausgelöst oder gesteuert. Jede Seite enthält nur einen primären Button. Alle weiteren Buttons lassen sich durch Anordnung und Aussehen als weniger wichtig erkennen.
Sekundäre Buttons ergänzen den primären Button, zum Beispiel um eine gegenteilige Aktion – etwa „Abbrechen“ oder „Zurück“ – auszuführen. Nutze so wenig Buttons je Seite wie möglich, um Nutzer:innen fokussiert zu halten und nicht zu verwirren. Sollte sich dennoch ein Reihe von sekundären Buttons ansammeln, versuche eher die Inhalte dieser Seite bzw. den Dienst in kleinere Abschnitte aufzuteilen.
Nutze den tertiären Button, um Funktionen, die nicht in direktem Zusammenhang mit der Hauptfunktion stehen – zum Beispiel Daten nach einem Kriterium sortieren – visuell deutlich abzugrenzen und dennoch als Funktion erkennbar zu halten. Beispiele: „Abbrechen“ oder „Modal schließen“.
Icons
Nutze Icons in Buttons nur dann, wenn sie Nutzenden helfen, die Funktion des Buttons schneller zu erfassen. Zum Beispiel
- in einem Prozess einen Schritt zurückgehen: Pfeil nach links
- Daten löschen: Mülleimer
- Suche starten: Lupe.
- Icon-Position
- Nur Icon
Das Icon steht standardmäßig einleitend links vor dem Label. Es kann auch rechts stehen, wenn es zum Verständnis des Ablaufs beiträgt, zum Beispiel wenn es „weiter“ geht.
Ist der Raum für Buttons mit ausgeschriebenen Labels zu klein, nutze die Icon-only-Variante. Achte dabei unbedingt auf ausreichende Bekanntheit des Icons. Icon-only-Buttons müssen eine beschreibende Ergänzung im alt-Attribut haben.
Inaktiv
Inaktive Buttons zeigen, dass eine Funktion grundsätzlich vorhanden ist, aber in diesem Moment nicht zur Verfügung steht. Wegen des oftmals schlechten Kontrasts und der Verwechslung mit anderen Buttons solltest du jedoch auf inaktive Buttons wenn möglich verzichten. Nur wenn sie zum Verständnis, dem Wiedererkennen oder der Konsistenz des gesamten User-Interfaces beitragen, solltest du sie nutzen.
Block-Button
Für mobile Ansichten setze den Block-Button ein. Seine Breite orientiert sich nicht an der Laufweite des Textes, sondern an der Breite des Bildschirms und ist damit übersichtlicher.
Dos und Don’ts
Verwende nur einen primären Button je Seite.
Verwende gemischte Schreibweise anstelle von Großbuchstaben.
Wenn mehrere Buttons mit unterschiedlicher Wichtigkeit nebeneinander stehen, hebe den Wichtigeren hervor.
Platziere Buttons nicht untereinander, sondern nebeneinander, sofern der Raum dafür vorhanden ist.
Vermeide zwei- oder mehrzeilige Beschriftungen.
Verwende Buttons nicht inline in Texten, nutze dafür Textlinks.
Barrierefreiheit
Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.
Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.
Implementierungsabhängig
Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:
WCAG 1.1.1
Icon-only-Buttons haben screenreader-only-Text
WCAG 1.3.1
Button-Gruppen sind programmatisch erkennbar
WCAG 2.4.3
Fokusreihenfolge bei Buttons verläuft logisch
WCAG 3.3.2
Buttons haben eindeutige und aussagekräftige Beschriftungen
WCAG 4.1.2
Button-disabled-Zustand ist für Screenreader zugänglich
WCAG 4.1.2
Button-Aktivierungszustand wird programmatisch bereitgestellt
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.3.3
Button ist nicht nur durch sensorische Merkmale beschreibbar
WCAG 1.4.6
Button-Text erfüllt das minimale Kontrastverhältnis von 4.5:1
WCAG 1.4.11
Button-Hintergrund hat ausreichenden Kontrast zum Umfeld
WCAG 2.1.1
Button ist vollständig per Tastatur bedienbar
WCAG 2.4.13
Button-Fokuszustand ist deutlich sichtbar
WCAG 2.5.3
Sichtbarer Button-Text ist Teil des zugänglichen Namens
WCAG 2.5.5
Button hat ausreichende Mindestgröße für Berührung
WCAG 3.2.4
Gleichartige Buttons sind konsistent gestaltet
Siehe auch: BFIT Handreichungen