Zum Hauptinhalt springen

Button

Synonyme: Schaltfläche, Befehlsschaltfläche, Schalter, Push Button

Kurzbeschreibung

Ein Button löst eine Aktion aus, seine Beschriftung benennt diese Aktion.

Beispiele

Loading...
<div className="component-row">
<KernButton _label="Primary" _variant="primary"></KernButton>
<KernButton _label="Secondary" _variant="secondary"></KernButton>
<KernButton _label="Secondary" _variant="secondary"></KernButton>
</div>

<div className="component-row">
<KernButton  _label="Primary" _variant="primary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_forward' } }"></KernButton>
<KernButton _label="Secondary" _variant="secondary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_back' } }"></KernButton>
<KernButton _label="Tertiary" _variant="tertiary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_forward' } }"></KernButton>
</div>

<div className="component-row">
<KernButton _hide-label="true" _label="Primary" _variant="primary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_forward' } }"></KernButton>
<KernButton _hide-label="true" _label="Secondary" _variant="secondary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_back' } }"></KernButton>
<KernButton _hide-label="true" _label="Tertiary" _variant="tertiary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_forward' } }"></KernButton>
</div>

<div className="component-row">
<KernButton _label="Primary" _variant="primary" _disabled></KernButton>
<KernButton _label="Secondary" _variant="secondary" _disabled></KernButton>
<KernButton _label="Tertiary" _variant="tertiary" _disabled></KernButton>
</div>

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

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefines the elements access key.string | undefinedundefined
_ariaControls_aria-controlsDefiniert, welche Elemente von dieser Komponente gesteuert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)string | undefinedundefined
_ariaExpanded_aria-expandedDefiniert, ob das interaktive Element der Komponente etwas erweitert hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)boolean | undefinedundefined
_ariaSelected_aria-selectedDefiniert, ob das interaktive Element der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)boolean | undefinedundefined
_customClass_custom-classGibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.string | undefinedundefined
_disabled_disabledGibt an, ob der Button deaktiviert ist.boolean | undefinedfalse
_hideLabel_hide-labelBlendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.boolean | undefinedfalse
_icons_iconsSetzt die Iconklasse (z.B.: _icon="material-symbols-outlined home").string | undefinedundefined
_id_idDefines the internal ID of the primary component element.string | undefinedundefined
_label (required)_labelGibt den Text des Buttons an.stringundefined
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Definiert die Rückruffunktionen für Button-Ereignisse.undefined | { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> | undefined; onMouseDown?: EventCallback<MouseEvent> | undefined; }undefined
_type_typeDefiniert entweder den Typ der Komponente oder des interaktiven Elements der Komponente."button" | "reset" | "submit" | undefined'button'
_variant_variantGibt an, welche Ausprägung der Button hat."custom" | "primary" | "secondary" | "tertiary" | undefined'primary'