Button ​

Ein Button ist ein Steuerelement, mit dem eine zugeordnete Funktion ausgelöst werden kann.

Overview ​

Intro ​

Ein Button ist ein Steuerelement, welches dem Benutzer ermöglicht, eine zugeordnete Funktion auszulösen.

Button Beispiel

Verwendung ​

👍 Do👎 Don't
... für Funktionen, die im selben Fenster geöffnet bzw. ausgeführt werden sollen.
... für Aktionen z. B. Neu/Hinzufügen, Sichern, Löschen, Absenden, Abbrechen, Schließen.
... wenn zwischen Prozessschritten gewechselt werden können soll (zurück/vorheriger, weiter/nächster; in Funktionsleiste; siehe Inhaltsbereich)		... für reine Hypertext-Verknüpfungen, wie Sprungbefehle zwischen Seiten oder innerhalb einer Seite (sog. Anchor-Links), verwende einen Text-Link; siehe Links unter Typographie
... für Funktionen, die in einem neuen Fenster geöffnet bzw. ausgeführt werden sollen, verwende einen Text-Link; siehe Links unter Typographie
... für das Ein-/Ausblenden von Maskenteilen; z.B. “alle Anzeigen“ – verwende hierfür einen Text-Link; siehe Links unter Typographie

Guidelines ​

Aufbau ​

Buttons bestehen aus einer Schaltfläche mit Text. Sie können neben Text auch ein Icon enthalten. Standard ist der Button ohne Icon.

Beschriftung ​

Der Buttontext (Label) ist immer einzeilig und sollte kurz aber dennoch aussagekräftig formuliert werden. Das Label hat immer eine klare Information über die mit dem Button verbundene Aktion d.h. z.B. "Datei hochladen" statt "OK". Ebenso soll Buttontext Verwirrungen vermeiden (z. B. kein "Abbrechen" des Abbrechens).

Der Buttontext ist immer im "Sentence Case" verfasst. Das heißt die Groß- und Kleinschreibung wird wie in einem normalen Satz verwendet. Der erste Buchstabe ist immer groß geschrieben. Danach werden nur noch Nomen groß geschrieben. Beispiele für eine korrekte Button-Beschriftung: "Datensatz hinzufügen", "Abbrechen", "Speichern und Details anzeigen".

Verwendung von Icons ​

Icons sollten nur für Aktionen oberster Priorität eingesetzt werden, wenn zusätzliche Klarheit/Verständlichkeit notwendig ist und das Icon im hohen Maße Aussagekraft für die angebotene Aktion hat. Es gibt folgende Buttontypen:

  • Button ohne Icon (Standard)
  • Button mit Icon vor dem Buttontext (leading icon)
  • Button mit Icon nach dem Buttontext (trailing icon)
  • Button ausschließlich mit Icon

Varianten/Typen ​

Primary Button

Der Button erster Ordnung wird für eine hervorgehobene Hauptaktion auf einer Seite verwendet. Er darf nur einmal pro Maske verwendet werden
Secondary Button

Der Button zweiter Ordnung wird als Standard für Aktionen verwendet
Tertiary Button

Der Button dritter Ordnung wird für herabgesetzte Aktionen verwendet
Primary Danger Button

Der Primary Danger Button hebt besonders destruktive Aktionen hervor, wie zum Beispiel das permanente Löschen von Daten. Er wird verwendet, wenn die Hauptaktion destruktiv ist, etwa in modalen Dialogen.
Secondary Danger Button

Der Secondary Danger Button kommt zum Einsatz, wenn die sekundäre Aktion destruktiv ist, während die primäre Aktion nicht gefährdend ist, wie bei Dialogen mit mehreren Handlungsmöglichkeiten (zum Beispiel Löschen/Hinzufügen). Weitere Informationen finden Sie unter "Buttongruppen".
Tertiary Danger Button

Der Tertiary Danger Button wird verwendet, wenn die destruktive Aktion nur eine von mehreren möglichen Aktionen ist, die der Benutzer wählen kann, wie bei Dialogen mit mehreren Optionen (beispielsweise Löschen/Ändern/Hinzufügen). Weitere Informationen finden Sie unter "Buttongruppen".
Menu Split Button

Der Menu Split Button kombiniert eine Hauptaktion mit einem Menü für zusätzliche Optionen. Der linke Bereich löst direkt die Standardaktion aus, während der rechte Bereich ein Submenu mit verwandten Aktionen öffnet. Beispiel: Hauptaktion "Speichern"; verwandte Aktionen: "Als Vorlage speichern", "Speichern und schließen", "Speichern unter...".
Menu Button

Der Menu Button gruppiert mehrere eigenständige Aktionen mit inhaltlichem Zusammenhang unter einem gemeinsamen Oberpunkt. Beim Klicken öffnet sich ein Submenu, das diese Optionen übersichtlich darstellt. Beispiel: "Mehr Aktionen"; Menü mit "Kopieren", "Schließen", "Entfernen".
Icon Button

Ein Icon Button wird eingesetzt, um Platz in der Benutzeroberfläche zu sparen, wiederkehrende Funktionen (z. B. Inline‑Aktionen in Tabellen) kompakt darzustellen oder interaktive Icons innerhalb anderer Komponenten, wie Tabellen, einzubinden.

Anordnung & Gruppierung ​

Buttons sind immer in Leserichtung am Ende des Elements angeordnet, auf das ihre Funktion Einfluss hat (sprich: rechts bzw. rechts-unten).

Buttongruppen

Info für Dev

Verwende die Menüleiste (Menubar) um Buttongruppen nebeneinander dazustellen. Siehe auch den Showcase für Toolbars für die häufigsten Anwendungsfälle, wie in der Tabellen-Funktionsleiste und in Sektion-Funtionsleisten.

Wenn mehrere Buttons gleichzeitig angeboten werden, gelten folgende Regeln:

  • Buttons erster Ordnung (primäre Schaltfläche; primary Button) immer ganz rechts anordnen
  • Buttons zweiter Ordnung (sekundäre Schaltfläche; secondary Button) immer links von der primären Schaltfläche anordnen
  • Buttons dritter Ordnung (tertiäre Schaltfläche; tertiary Button) immer links von der sekundären (oder falls nicht vorh. primären) Schaltfläche anordnen

Es können immer nur maximal zwei Buttonstile nebeneinander verwendet werden:

  • sekundär + primär
  • tertiär + sekundär
  • tertiär + primär
  • normal + negativ (Reihenfolge je nach Hauptaktion)
  • negativ + positiv (Reihenfolge je nach Hauptaktion)

Dies gilt generell und für sämtliche Vorkommen von Buttons und Buttongruppen, z. B. in der Funktionsleiste (siehe Inhaltsbereich) und modalen Dialogen (siehe Modal Dialog ).

Verhalten ​

Die Breite der Buttons passt sich automatisch an den Textinhalt an.

Button ​

Bei Klick auf einen Button wird die damit verbundene Aktion oder Funktion ausgelöst.

Dieser Button besteht aus zwei Bereichen: Der Hauptbereich führt eine vordefinierte Standardaktion aus, während der Pfeilbereich ein Submenu mit weiteren verwandten Aktionen öffnet.

Verhalten Menu Split Button

Beim Klick auf den Button öffnet sich ein Submenu mit mehreren eigenständigen Aktionen aber inhaltlichem Zusammenhang. Der gesamte Button dient ausschließlich dem Öffnen des Menüs. Bei Klick auf eine Aktion wird diese ausgelöst.

Verhalten Menu Button

States ​

Jeder Buttontyp kann entweder aktiv oder inaktiv sein, je nachdem ob der Button gerade klickbar ist oder nicht. Die Darstellung der States entspricht der Standarddarstellung. Siehe States .

Deaktivierter Button mit Hinweis

Meistens können sich Nutzer selbst erklären, warum eine Funktion bzw. ein Button deaktiviert ist wie z.B. warum man auf dem letzten Schritt eines Wizards nicht weiter klicken kann.

Es gibt jedoch auch Situationen, in denen die Nutzer sich nicht erklären können warum ein Button deaktiviert wurde. Für diese Anwendungsfälle können Hinweise angezeigt werden, damit die Nutzer den Zustand vom System besser nachvollziehen können. So können sie ggf. ihre Aufgaben auf einem anderen Weg weiter bearbeiten.

Primärer Button mit Tooltip

Barrierefreiheit ​

Werden Icon Buttons verwendet, müssen aria-label Attribute und Tooltips verwendet werden, um die Barriefreiheit und die Screenreader Unterstützung zu gewährleisten.

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") sind Buttons fokussierbar.

Für alle Buttontypen gilt: ist ein Button im Fokus, kann dieser mittels Return, Enter und auch per Leerzeichentaste ("Space") ausgelöst werden.

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-button--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter:  https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fbutton

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-button-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;

Variants ​

Primary ​

java
Button button = new Button("Primary", e -> System.out.println("Button clicked"));
button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

Secondary ​

java
Button button = new Button("Secondary");

Tertiary ​

java
Button button = new Button("Tertiary");
button.addThemeVariants(ButtonVariant.LUMO_TERTIARY);

Success ​

java
Button button = new Button("Tertiary");
button.addThemeVariants(ButtonVariant.LUMO_SUCCESS);

Error / Danger ​

java
Button button = new Button("Tertiary");
button.addThemeVariants(ButtonVariant.LUMO_ERROR);

Disabled ​

java
Button button = new Button("Tertiary");
button.setEnabled(false);

Icon ​

See icon for an explanation of how to install the icon component and symbols. Alternatively use span.

java
Button button = new Button(new Icon(MaterialSymbol.SymbolAdd, "add aria label"));

WARNING

Warning: Do not use aria labels on icon and button at the same time, as they both will be read out!. Same goes for grid cells, when they contain actions.

Prefix Icon ​

java
Button button = new Button("Backward");
button.setIcon(new Icon(MaterialSymbol.SymbolChevronLeft));

Suffix Icon ​

java
Button button = new Button("Forward");
button.setIcon(new Icon(MaterialSymbol.SymbolChevronRight));
button.setIconAfterText(true);

Icon unstyled ​

java
Button button = new Button(new Icon(MaterialSymbol.SymbolAdd));
button.addThemeNames(ButtonVariant.LUMO_ICON.getVariantName(), "unstyled");