Tags

Darstellung

Mit Tags zeigen wir Nutzenden auf übersichtliche Weise eine Reihe von Stichworten oder einen Status an. Tags sind keine interaktiven Elemente. Es dürfen damit keine Links oder Funktionen dargestellt werden (verwende dafür Chips).

• Tags gibt es in drei visuellen Ausprägungen: mit Rahmen (Standard), flächig in der Akzentfarbe (Auffordernd) und in Rot (Achtung).
• Tags weisen kein Interaktionsverhalten auf und sind nicht klickbar
• Tags sollten nicht auf farbigen Hintergründen verwendet werden

Anwendung

Status Tags

Weisen Elemente in einem Interface einen Status auf (z.B. abgeschlossen, in Prüfung) wird dieser mit einem Status Tag dargestellt. Die Tags sind Teil der Aktionen und werden in Komponenten wie Seitenkopf für Applikationen und Aktionslisten eingesetzt.

Es stehen drei verschiedene Status für Tags zur Verfügung:

• Standard: Normale Darstellung eines Status, keine Handlung der Nutzenden erforderlich.
• Notifikation: Der Status zeigt an, dass sich etwas verändert hat oder aktiv ist. Eine Handlung der Nutzenden ist nicht unmittelbar nötig.
• Achtung: Dieser Status zeigt einen Fehler an. Eine Handlung der Nutzenden ist zwingend erforderlich.

Stichwortlisten

Wir verwenden Tags für Stichworte, die in einem Interface dargestellt werden sollen. Sind z.B. Daten mit Stichworten versehen worden und kann nach diesen Stichworten gesucht werden, können diese Stichworte als Tags aufgelistet werden.

Chips

Darstellung

Mit Chips zeigen wir Nutzenden auf übersichtliche Weise eine Reihe von Links oder Funktionen auf. Als interaktives Element geben Chips «onHover» bzw. «onTap» ein visuelles Feedback zurück.

• Chips entsprechen im Interaktionsverhalten und Farbe dem Styling von sekundären Buttons. Anders als die Buttons sind diese jedoch rund dargestellt.
• Chips weisen einen klar erkennbaren Aktiv-Status auf
• Auf dunklem Hintergrund werden die Interaktionselemente invertiert, um den Lesekontrast zu gewährleisten.

Varianten

Chips

Wird eine Schaltfläche verwendet, um eine Anzeige zu steuern (Filter) oder um Nutzenden eine Auswahl zu ermöglichen, kann die Chip-Variante der Buttons eingesetzt werden. Chips in Filtern setzen wir dann ein, wenn Nutzende nur jeweils innerhalb einer Kategorie filtern können, um die Resultatsanzeige zu beeinflussen. Die Auswahl kann ausschliessend (Radio) oder einschliessend (Multiselect) sein.

Chips mit Icons

Chips mit Icon werden für spezifische Zusatzfunktionen eingesetzt, z. B. Entfernen, Selektieren. Dabei verdeutlicht das Icon die Funktion des Chips. Je nach Einsatz kann das Icon vor oder nach dem Text platziert werden. Typische Anwendung von Chips mit Icons sind Filter.

Chip Link

Als platzsparende Variante einer Reihe von Links kann diese in Form von Chips dargestellt werden. Wir verwenden Chips, wenn eine Reihe von Links ( 3 bis 10 ) mit der gleichen Funktion dargestellt werden sollen. Wir verwenden Chips als Links im Seitenkopf Web und im Modul Verantwortliche Stellen.