Button

Beispiel

Das Design System stellt unterschiedliche Arten von Buttons zur Verfügung. Je nach Anwendungsfall und Betonung können diese unterschiedlich eingesetzt werden.

Standard Button

Button mit Text und Icon

Icons können einem Button hinzugefügt werden, um Aktionen abzubilden, die mit der Hauptaktion in direktem Zusammenhang stehen. So kann über die Icon-Box beispielsweise ein Dropdown geöffnet werden, das weitere Varianten der Hauptaktion zur Verfügung stellt.

Icon Only Button

Ist die Aktion, die ein Button ausführt durch ein Icon alleine so eindeutig, kann auch auf den Text verzichtet werden.

OnBackground Property

Neben den Standard Buttons, besteht gelegentlich Bedarf bei Light Mode einen hellen Button-Text und bei Dark Mode einen dunklen Button-Text zu verwenden. Dies ist der Fall bei Tertiary Button, die keine Hintergrundfarbe aufweisen und "nackt" auf der Component liegen. Hier kann es dazukommen, dass kein ausreichender Kontrast gewährleistet werden kann, wenn z. B. ein Button mit weißem Text auf einer hellblauen Message-Component liegt. Um dies zu vermeiden, gibt es den Light Mode Tertiary Button OnBackground Dark und den Dark Mode Tertiary Button OnBackground Light.

Button für Touch Terminals (KMT Touch)

Der Button für Touch Terminals ist eine Variante der Button Component, die eigens für die Verwendung auf Touchscreen Terminals wie dem KMT Touch optimiert wurde. Ausschlaggebende Merkmale dieses Touch Terminals ist eine begrenzte Displaygröße im Querformat sowie die dauerhafte Befestigung an einer Wand auf einer festgelegten Höhe. Der besondere Nutzungskontext des KMT Touch erfordert entsprechende Anpassungen bei der Button Component für eine optimale Benutzerfreundlichkeit.

Für geeignete Leserlichkeit auch aus der Ferne sorgt eine kontrastreiche Farbgebung sowie der Einsatz von Groß- und Kleinbuchstaben im Button Label. Der Button hat außerdem eine Höhe von 64px, um mit einer möglichst großen Klickfläche eine einfache Bedienung zu gewährleisten.

Ein weiterer Unterschied zum Standard Button liegt in der Platzierung des Icons. Den Button für Touch Terminals gibt es mit und ohne Icon, wobei das Icon entweder links oder rechts platziert sein kann. Auch ist aufgrund der zentrierten Ausrichtung des Button-Inhalts auf die optische Balance zu achten. Daher ist das horizontale Padding zwischen Icon-Container und Rand nur halb so breit gesetzt wie das Padding zwischen Text und Rand des Buttons. So wird das optische Gewicht des Icons ausgeglichen, damit der Button-Inhalt optisch zentriert wirkt. 

Interaktionen

Buttons können einen Hovered- sowie Pressed-Zustand darstellen.

Für den Hover-Effekt wird im Light Mode mit Schatten gearbeitet, im Dark Mode wird die Button-Farbe geändert. Um den Pressed-Zustand zu verdeutlichen, wird in beiden Modi die Button-Farbe angepasst.

Button mit Text und Icon

Bei dem Button mit Text und Icon stellen die Hauptaktion und die verwandte(n) Aktion(en), die über die Icon-Box verfügbar sind, zwei separate Interaktionen dar. Daher haben Hauptaktion und Icon-Box separate Hovered- und Pressed-States.

Disabled

Ist die Funktion eines Buttons deaktiviert, soll dies dem User auch kommuniziert werden. Daher werden alle Button Varianten grau dargestellt.

Loading

Führt ein User eine Interaktion aus, die eine gewisse Zeit andauert bis sie beendet ist, kann das durch einen Loading-Spinner im Button kommuniziert werden. Dies verhindert vor allem auch das erneute Ausführen einer Aktion, solange die vorangegangene Aktion noch nicht beendet wurde.

Button für Touch Terminals (KMT Touch)

Da der Button für Touch Terminals (KMT Touch) nur auf Touchscreens zur Anwendung kommt, fällt der Hovered-Zustand weg. Der Button für Touch Terminals verfügt daher nur über einen Default- und einen Pressed-Zustand.

Live Demo

Diese Live Demo zeigt die Button Komponente in Web-Component Technologie.

Showcases

Button

Button für Touch Terminals (KMT Touch)