Button

Weiterleitung

Sie werden in Sekunden weitergeleitet.

Falls keine Weiterleitung erfolgt, klicken Sie auf den Link:

Es ist etwas schief gelaufen.

Upps - das Senden Deiner Anfrage ist fehlgeschlagen. Du kannst uns aber immer via E-Mail erreichen.

Buttons

Buttons bieten den Nutzer:innen die Möglichkeit, Aktionen auszulösen. Das Buttonlabel liefert Informationen, welche Aktion ausgeführt wird.

  1. Primary Buttons: Brand Primary & Primary
  2. Secondary Buttons: Outline & Solid
  3. Tertiary Button
  4. Icon Button
  1. Primary Buttons: Brand Primary & Primary
  2. Secondary Buttons: Outline & Solid
  3. Tertiary Button
  4. Icon Button

Wann werden Buttons eingesetzt?

  • Senden eines Formulars  
  • Starten einer Aufgabe oder eines Dialoges 
  • Auslösen eines neuen UI Elements 
  • Steuern eines Prozesses 
  • Steuerung von Medien oder Präsentationen
  • Falls die Farbe Rot als Signalfarbe in der Anwendung eingesetzt wird, verwenden wir alternativ den schwarzen Primary Button.

Betonung

Werden mehrere Buttons auf einer Seite verwendet, muss eine Betonung eingehalten werden. Wir setzen den Brand Primary Button nicht inflationär auf einer Seite ein, sondern nutzen ihn als Highlight Call-To-Action, um den primären Use Case sowie das Conversion Target zu erreichen. Um die Interaktionsmöglichkeiten einer Seite zu strukturieren nutzen wir für alle anderen Aktionen Secondary und Tertiary Buttons.

Kombinationsmöglichkeiten

Größe und Form

Die Buttons existieren in drei Größenausprägungen, wobei Small für Bildschirmauflösungen im Mobile-Kontext bestimmt sind. Innerhalb einer Anwendung verwenden wir nur eine Buttongröße.

Barrierefreiheit

Die kombinierte Darstellung von Buttonlabel und Icon hilft, die hinter den Buttons liegenden Aktionen verständlicher zu machen, wodurch sie für Personen mit kognitiven Einschränkungen oder einer Sprachbarriere leichter erfassbar sind. Aus Sicht der Barrierefreiheit sind diese den Text Buttons vorzuziehen.

Label

Schreibweise

Idealerweise sollte das Label auf ein bis zwei Wörter reduziert sein und ein Verb enthalten bzw. aus einem Verb bestehen. Dabei wird jeweils der erste Buchstabe eines Wortes groß geschrieben.

Sonderfall

Werden mehr als zwei bis drei Wörter gebraucht, um die Aktion verständlich auszudrücken, wird nur der erste Buchstabe des ersten Wortes sowie Substantive groß geschrieben.

Primary Button

Wir nutzen Primary Buttons als Highlight Call-To-Action, um den primären Usecase abzuschließen oder das Conversion Target zu erreichen. Der Brand Primary Button steht hierarchisch über dem Outline Button.

Wann werden Primary Buttons eingesetzt?

  • Zum Abschluss des primären Usecases
  • als Highlight Call-To-Action
  • Hervorheben des Conversion Targets

Anwendung

Der Primary Button ist der stärkste Call-To-Action auf einer Seite und soll die Nutzer:innen zum Conversion Target leiten. Aus diesem Grund verwenden wir ihn im besten Fall nur einmal pro Seite.

Es gibt Fälle, in denen der Einsatz der Primary Buttons variieren kann. Im nachfolgenden Beispiel stellt der Kauf eines Produktes den primären Usecase dar und ist deshalb für die Verwendung von Primary Buttons geeignet. Zum gezielten Hervorheben eines Elements kann der Primary Button einmalig eingesetzt werden (Beispiel 1), aber auch mehrfach, wenn die Auswahlmöglichkeiten im gleichen Zusammenhang mit dem primären Usecase stehen (Beispiel 2).

Wichtig!

Falls die Farbe Rot als Signalfarbe in der Anwendung eingesetzt wird, verwenden wir alternativ den schwarzen Primary Button.

Secondary Button

Wir nutzen Secondary Buttons als alternative Auswahlmöglichkeit neben Primary Buttons. Sie stehen hierarchisch unter den Primary Buttons. In bestimmten Fällen können Secondary Buttons auch anstelle von Primary Buttons zum Abschluss des primären Usecases verwendet werden.

Wann werden Secondary Buttons eingesetzt?

  • Als alternative Aktion neben Primary Buttons 
  • Als primäre Schaltflächen, insofern kein Primary Button auf der Seite verwendet wird

Anwendung

In diesem Beispiel wird der Secondary Button als alternative Aktion zum roten primären Button eingesetzt. Dadurch wird die Aufmerksamkeit der Nutzer:innen deutlich auf das Conversion Target (Abschluss der Buchung) gelenkt.

In bestimmten Anwendungsfällen kann es vorkommen, dass zwei Auswahlmöglichkeiten hierarchisch auf dem selben Level stehen. Will man keine Präferenz in der Nutzerführung aufzeigen, eignen sich Secondary Buttons.

Der Secondary Button kann, wie hier im Beispiel zu sehen, auch anstelle eines Primary Buttons zum Einsatz kommen. Dies empfiehlt sich vor allem bei Webseiten mit redaktionellen Inhalten.

Tertiary Button

Tertiary Buttons können als alternative Auswahlmöglichkeit neben Primary- und Secondary Buttons genutzt werden. Sie unterscheiden sich visuell nicht von Textelementen.

Wann werden Tertiary Buttons eingesetzt?

  • Als alternative Aktion neben Primary- und Secondary Buttons
  • Als hierarchisch unterstes Interaktionselement

Anwendung

Einsatz des Tertiary Buttons als alternative und hierarchisch untergeordnete Auswahlmöglichkeit zum Primary oder Secondary Button.

Möchten Sie diese Komponente in Ihrem Web Projekt einsetzen? Informieren Sie sich in unserem Getting started über den einfachen Einsatz unserer universellen Web Components.

Du hast Fragen oder Input? 

Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!

E-Mail schreiben Feedback in Github