Zum Hauptinhalt springen
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​

Primary Button​

Code anzeigen
<button class="kern-btn kern-btn--primary">
<span class="kern-btn__title">Primary Button</span>
</button>

Varianten​

Code anzeigen
<button type="button" class="kern-btn kern-btn--primary"><span class="kern-btn__title">Primary Button</span></button>
<button type="button" class="kern-btn kern-btn--secondary"><span class="kern-btn__title">Secondary Button</span></button>
<button type="button" class="kern-btn kern-btn--tertiary"><span class="kern-btn__title">Tertiary Button</span></button>

Block​

Code anzeigen
<button class="kern-btn kern-btn--block kern-btn--primary">
<span class="kern-btn__title">Primary Block</span>
</button>

Icons​

Ist der Raum für Buttons mit ausgeschriebenen Labels zu klein, nutze die Icon-only-Variante. Achte dabei unbedingt auf ausreichende Bekanntheit des Icons und einen Screenreader-Only Text.

Code anzeigen
<button class="kern-btn kern-btn--primary">
<span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
<span class="kern-btn__title">Primary Button</span>
</button>

<button class="kern-btn kern-btn--secondary">
<span class="kern-btn__title">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-btn__title kern-sr-only">Bearbeiten</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:

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.

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.

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.

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 nur einen primären Button je Seite.

Verwende gemischte Schreibweise anstelle von Großbuchstaben. Verwende gemischte Schreibweise anstelle von Großbuchstaben.

Wenn mehrere Buttons mit unterschiedlicher Wichtigkeit nebeneinander stehen, hebe den Wichtigeren (sekundär, tertiär) hervor. 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. Platziere Buttons nicht untereinander, sondern nebeneinander, sofern der Raum dafür vorhanden ist.

Vermeide zwei- oder mehrzeilige Beschriftungen. Vermeide zwei- oder mehrzeilige Beschriftungen.

Verwende Buttons nicht inline in Texten, nutze dafür Textlinks. 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

Inhaltsverzeichnis