Button. Übersicht

Was macht die Komponente?

  • Löst eine Aktion auf einer Seite aus.

Wann soll die Komponente eingesetzt werden?

  • Beim Starten oder Beenden eines Prozesses.
  • Beim Absenden eines Formulars.
  • Beim Aufrufen einer Funktion auf einer Seite.

Regeln

  • Darf nicht innerhalb von Fliesstext eingesetzt werden.
  • Darf nicht im Header als Navigation oder Funktion eingesetzt werden.
  • Die Mindestbreite beträgt 60px.
  • Die Breite wächst mit der Textlänge. Bei mobilen Ansichten ist die Breite 100%.
  • Ist der Text beim Erreichen der Maximallänge immer noch zu lang, wird dieser mit «...» abgekürzt.
  • Der Text ist immer einzeilig.
  • Buttons werden im Viewport rechtsbündig angeordnet. Der Primary Button wird links vom Secondary Button platziert.
 Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Hover
  • On-click
  • Disabled

Varianten

Primary Button

[object Promise]

Alternative Primary Button

[object Promise]

Secondary Button

[object Promise]

Ghost Button

[object Promise]

Icon Button

[object Promise]

Beim Hover über einen Icon Button sollte ein Tooltip verwendet werden, um die dahinterliegende Aktion klarer zu machen.

Mehrere Aktionen

[object Promise]

Spezifikationen

[object Promise]