1. Container
2. Text Label
3. Symbol

Badge-Bezeichnungen sollten, so kurz und präzise wie möglich, formuliert sein. Wenn der Badge-Text über 16 Zeichen lang ist, dann bricht er um und das Badge wird mehrzeilig.

Die verschiedenen Badge-Varianten (Primäre, Sekundäre, Tertiäre) können zum Beispiel zur besseren Unterscheidung von verschiedenen Status verwendet werden. Dabei wird in der Regel die primäre Variante für den Badge verwendet, der am meisten Aufmerksamkeit benötigt (von sekundär zu tertiär absteigend).

Die Farbe/Graustufe der primären und sekundären Badges auf hellem Hintergrund ist beliebig aus dem Katalog der GeFa-Farben wählbar, solange der Farbkontrast von 7:1 von Text zu Badge- bzw. zur Hintergrundfarbe erfüllt wird.

Beispiele für übliche Badge-Farben:

• Grün = aktiver Status bzw. Makierung für Vollständigkeit
• Rot = fehlerhafter oder warnender Status
• Schwarz = verwendet z. B. für Auskunftssperre-Badge

Farbe darf nicht als alleiniges Unterscheidungsmerkmal zu anderen Badges dienen.

Sekundäre und tertiäre Badges haben immer eine leichte Transparenz, so dass man den Hintergrund leicht sehen kann.

Invertierte Badges (wenn auf dunklem Hintergrund dargestellt) enthalten keine Farbauszeichnung mehr. Alle Farben von primären/sekundären Badges werden zu weiß.

Tertiäre (graue Badges) werden in der Regel verwendet, um einen inaktiven, abgelaufenen oder archivierten Status zu visualisieren.

Bei einer Kombination aus Text und Symbol, visualisiert das Symbol nur den Text und muss als Layoutgrafik ausgezeichnet werden. Bei reiner Symboldarstellung muss ein Alternativtext hinterlegt sein.

Wenn mehrere primäre Badges mit unterschiedlicher Farbe auf einem Screen angezeigt werden, dann muss Text bzw. Symbol und Alternativtext unterschiedlich sein.

Mit Badges kann nicht interagiert werden, da sie rein zur Anzeige dienen.

• keine Interaktion möglich

• keine Interaktion möglich