FigmaOpenCode

Button

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

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är

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.

Tertiär

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

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.

Nur Icon

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

Diese Komponente erfüllt die formalen Eigenschaften (Größe, Kontrastverhältnis) für barrierefreie Dienste. Achte in der angewandten Nutzung darauf, dass Label auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind bzw. über das „alt“-Attribut verständlich umschrieben sind.

• Das Drücken der Enter-Taste ist das Tastatur-Pendant für einen Klick auf den Button.
• Setze niemals Sonderzeichen, wie die "größer/kleiner als"-Zeichen < bzw. > oder den Buchstaben x als Icon ein. Diese werden als Schrift interpretiert und vom Screenreader entsprechend mit vorgelesen, was zu Irritationen führen kann.
• Falls Schriftzeichen als Bestandteil eines Buttons zwingend genutzt werden müssen, sollten diese über ein „aria-hidden=true“ für den Screenreader versteckt werden.
• Inaktive Buttons sollten über ein „aria-disabled=true“ ausgezeichnet werden und nicht nur mittels „disabled“. Die „ausgegrauten“ Buttons müssen trotz Inaktivität per Tastatur ansteuerbar und für den Screenreader ausgebbar sein (siehe dazu: Button - Web accessibility checklist - MagentaA11y).
• Für die Sprachsteuerung muss die sichtbare Beschriftung eines Buttons auch mit dem „assistiven“ Namen (z. B. aria-label) übereinstimmen bzw. Inhalt von dessen sein. Positiv-Beispiel: Der sichtbare Button-Name lautet „Hinzufügen“, über ein aria-label ist der assistive Name „Einen neuen Eintrag hinzufügen“ gesetzt. Negativbeispiel wäre, wenn der assistive Name „Neuen Eintrag ergänzen“ also kein „hinzufügen“ beinhalten würde.

Siehe auch: BFIT Handreichungen