Buttons

Der Button ist ein interaktives HTML Element, mit dem verschiedenste Aktionen ausgeführt werden. Momentan sind folgende Button Typen verfügbar:

  • primary
  • secondary
  • tertiary
  • quaternary

Wird kein Typ angegeben wird ein primary Button gerendert.

Merke: Kann ich auf einen Button sinnvoll rechtsklicken? Wenn ja, dann Link verwenden. Wenn nein, dann Button verwenden.

Index



Typen

In diesem Test werden bei BackstopJS auch die Hover States überprüft.

Primary Button
Secondary Button
Tertiary Button
Quaternary Button
Primary Button with long Text
Secondary Button with long Text
Tertiary Button with long Text
Quaternary Button with long Text


Disabled

In diesem Test werden bei BackstopJS auch die Hover States überprüft.

Primary Button
Secondary Button
Tertiary Button
Quaternary Button


Small

Primary Button
Secondary Button
Tertiary Button
Quaternary Button
Primary Button with Long Text
Secondary Button with Long Text
Tertiary Button with Long Text
Quaternary Button with Long Text


Chevron Clickable

Testet die Chevron Funktionalität. Beim Klick wird das Chevron um 180 Grad gedreht und bei einem weiteren Klick wird dieser wieder in den Ursprungszustand zurückgesetzt. Chevrons können mit der Tastatur angesteuert werden, indem die Enter Taste gedrückt wird, während der Button fokussiert ist.



Chevron Focus Out

Testet die Focus Out Funktionalität. Diese wird z.B. für das Button Dropdown Menü im Kundenbereich benutzt. Hier wird aber nur das Chevron getestet. Der Focus Out bewirkt, dass das Chevron sich in seine Ursprungsposition zurückbewegt, sobald mit der Maus oder Tastatur auf ein anderen Element fokusiert wurde.



Buttons in Formularen

Primary Button

Form Action geht auf Google und öffnet sich im gleichen Fenster.

Primary Button mit Link in einer Form

Hier sollte der Button die StarMoney Webseite aufrufen.


Hier sollte der Button das Formular abschicken und auf www.google.de landen.

Secondary Button

Form Action geht auf Google und öffnet sich im gleichen Fenster.

Secondary Button mit Link in einer Form

Hier sollte der Button die StarMoney Webseite aufrufen.


Hier sollte der Button das Formular abschicken und auf www.google.de landen.

Tertiary Button

Form Action geht auf Google und öffnet sich im gleichen Fenster.

Tertiary Button mit Link in einer Form

Hier sollte der Button die StarMoney Webseite aufrufen.


Hier sollte der Button das Formular abschicken und auf www.google.de landen.

Quaternary Button

Form Action geht auf Google und öffnet sich im gleichen Fenster.

Quaternary Button mit Link in einer Form

Hier sollte der Button die StarMoney Webseite aufrufen.


Hier sollte der Button das Formular abschicken und auf www.google.de landen.



Full Width Modifier

Primary Button ohne Link

Primary Button mit Link

Secondary Button ohne Link

Secondary Button mit Link

Tertiary Button ohne Link

Tertiary Button mit Link

Quaternary Button ohne Link

Quaternary Button mit Link



Content Fit Modifier

Primary Button ohne Link

Primary Button mit Link

Secondary Button ohne Link

Secondary Button mit Link

Tertiary Button ohne Link

Tertiary Button mit Link

Quaternary Button ohne Link

Quaternary Button mit Link



Full Width bis Breakpoint Modifier

Primary Button ohne Link

Primary Button mit Link

Secondary Button ohne Link

Secondary Button mit Link

Tertiary Button ohne Link

Tertiary Button mit Link

Quaternary Button ohne Link

Quaternary Button mit Link



Content Fit bis Breakpoint Modifier

Primary Button ohne Link

Primary Button mit Link

Secondary Button ohne Link

Secondary Button mit Link

Tertiary Button ohne Link

Tertiary Button mit Link

Quaternary Button ohne Link

Quaternary Button mit Link



Margins

Wir haben hier das Problem, dass wir nicht erkennen können, ob ein Button in einer neuen Zeile ist und daher werden hier die Margins ab der zweiten Zeile auf der linken Seite mit einbezogen. Hier sollte ROV nochmal sich ein besseres System ausdenken und recherchieren, ob es ein Best Practice oder dergleichen gibt.

Primary Button ohne Link

Primary Button mit Link

Secondary Button ohne Link

Secondary Button mit Link

Tertiary Button ohne Link

Tertiary Button mit Link

Quaternary Button ohne Link

Quaternary Button mit Link



Margins innerhalb eines Bodytexts

Primary Button ohne Link

Primary Button mit Link

Secondary Button ohne Link

Secondary Button mit Link

Tertiary Button ohne Link

Tertiary Button mit Link

Quaternary Button ohne Link

Quaternary Button mit Link



Button Text Überlänge

Primary Button ohne Link

Secondary Button ohne Link

Tertiary Button ohne Link

Quaternary Button ohne Link



Button Text Überlänge Ellipsis

Primary Button ohne Link

Secondary Button ohne Link

Tertiary Button ohne Link

Quaternary Button ohne Link