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.

Index



Typen

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



Linked



Disabled

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



Small



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.

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.

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.

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.

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

Secondary Button

Tertiary Button

Quaternary Button



Content Fit Modifier

Primary Button

Secondary Button

Tertiary Button

Quaternary Button



Full Width bis Breakpoint Modifier

Primary Button

Secondary Button

Tertiary Button

Quaternary Button



Content Fit bis Breakpoint Modifier

Primary Button

Secondary Button

Tertiary Button

Quaternary Button



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

Secondary Button

Tertiary Button

Quaternary Button

Primary Button

Secondary Button

Tertiary Button

Quaternary Button



Margins innerhalb eines Bodytexts

Primary Button

Secondary Button

Tertiary Button

Quaternary Button



Button Text Überlänge



Button Text Überlänge Ellipsis