Buttons

Darstellung

Buttons zeigen Handlungsmöglichkeiten auf. Als interaktives Element geben sie onHover bzw. onTap ein visuelles Feedback an die Nutzenden zurück.

• Als Interaktionsfarben dienen die primären Farben des Kantons: Schwarz und Zürichblau. Dabei verwenden wir aus Gründen der Lesbarkeit (Barrierefreiheit) das Zürichblau nicht für Text, sondern nur für Hintergründe.
• Buttons haben eine schwarze, weisse oder graue Hintergrundfarbe, damit ist in jedem Fall die Unterscheidung zu allen Hintergrundfarben gewährleistet.
• Die Icons haben immer das gleiche Farbverhalten wie der Text in Buttons.
• Auf dunklem Hintergrund werden die Interaktionselemente invertiert, um den Lesekontrast zu gewährleisten.
• Ein Button kann die gesamte Breite und/oder Höhe einer Komponente beanspruchen. Dies primär bei mobilen Anwendungen von Aktionen. 

Stehen Buttons nebeneinander, trennt ein fixer Abstand die Buttons voneinander. Mehrere Buttons, die eine Option einer Funktion (Sortierung) darstellen, werden als zusammenhängende Gruppe dargestellt.

Verhalten

Status

Wir verwenden für Buttons die Status Default, onHover, Active, Disabled und onFocus.

Flying Focus

Beim Navigieren via Tabulator umrahmt der Flying Focus das interaktive Element. Der Flying Focus passt sich automatisch der Grösse des interaktiven Elements an. Es ist immer nur ein Fokus gleichzeitig möglich.

Kürzung

Ist der Button-Text beim Erreichen der Maximallänge immer noch zu lang, wird dieser mit «...» abgekürzt.

Verwendung

Wir setzen Buttons nie innerhalb von Fliesstext ein. Die positive Ausprägung der Buttons verwenden wir nur auf weissem oder grauem Hintergrund. Die negative Ausprägung verwenden wir nur auf buntem Hintergrund.

Primär-Button

Primär-Buttons führen Nutzende zur primären Aktion und sind für diesen Zweck visuell dominant gestaltet.

Sekundär-Button

Sekundär-Buttons werden für untergeordnete Aktionen eingesetzt, dürfen mehrfach angewendet werden und somit auch nebeneinanderstehen.

Button mit Icon

Um allgemein bekannte Funktionen intuitiver zugänglich zu machen, kann der Button-Text mit einem adäquaten Icon im Button ergänzt werden.

Button nur mit Icon

Um eindeutige Funktionen schnell zugänglich zu machen, kann ein Button mit nur einem Icon dargestellt werden.

Links

Darstellung

Ein Textlink ist das einfachste interaktive Element. Er ist klar gekennzeichnet und sticht somit aus dem Umfeld heraus. Links führen immer auf eine neue Seite.

Verhalten

Status

Wir verwenden für Links die Status Default, onHover und onFocus.

Flying Focus

Beim Navigieren via Tabulator umrahmt der Flying Focus den Link. Der Flying Focus passt sich automatisch der Grösse des Links an. Es ist immer nur ein Fokus gleichzeitig möglich.

Verwendung

Textlinks

Textlinks sind immer unterstrichen und in der Farbe Zürichblau ausgezeichnet. Sie verfügen über den gleichen Schriftschnitt wie der Text.

Link-Icon / Icon-Link

Den Link mit Icon setzen wir als subtilen Handlungsaufruf ein. Standardvariante ist die Kombination aus Text und Pfeil. Die Kombination aus Text und Icon ist möglich. Je nach Einsatz kann das Icon vor oder nach dem Text platziert werden. Links mit Icon sind spezifische Zusatzfunktionen, z. B. Zurück, Teilen, Drucken, die mit einem spezifischen Icon gekennzeichnet werden.