Badge ​

Ein Badge visualisiert den Status eines Objekts oder Inhalts mittels Text und Farbe.

Overview ​

Intro ​

Ein Badge wird in erster Linie dazu verwendet wichtige Informationen oder den Status hervorzuheben . Wenn sinnvoll, können einem Objekt mehrere Badges zugeordnet sein, die mehrere Statusinformationen anzeigen. Außerdem kann ein Badge auch als " Tag " (englischer Begriff für "Identifizierungskennzeichen") für Inhalte verwendet werden. Ein "Tag" zeigt die Zugehörigkeit zu einer Kategorie an.

Beispiel Badge Neutral

Verwendung ​

👍 Do👎 Don't
... wenn der Status eines Elements dargestellt werden soll (außer JA und NEIN-Werte)
... wenn der Status auf Detailseiten angezeigt werden soll (außer JA und NEIN-Werte)
... wenn der Zustand eines Datensatzes in einer Tabelle visualisiert werden soll (außer JA und NEIN-Werte).
... wenn mehrere Statusinformationen angezeigt werden sollen.
... wenn die Zugehörigkeit (als Tag) von Inhalten kommuniziert werden soll		... wenn der Status eindeutig mit einem 1 oder 0 Wert (Ja oder Nein) dargestellt werden kann.
... wenn das Element eine eigene Statusvisualisierung besitzt (z. B. fehlerhaftes Eingabefeld).

Guidelines ​

Aufbau ​

Ein Badge besteht aus Text , der auf einer farbig hervorgehobenen Fläche platziert ist. Die Breite der Fläche passt sich an die Länge des Textes an. Der Text sollte den Zustand in Worte fassen.

Beispiel: Ein Badge soll visualisieren, dass ein Datensatz fehlerhafte Daten enthält. Das Badge ist rot und enthält den Text "Fehlerhaft" oder "Fehlerhafte Daten"

Ein Badge muss so platziert werden, dass die Zugehörigkeit zum Element klar ist. In einer Tabelle wird ein Badge beispielsweise in der Zeile des zugehörigen Elements platziert. Wenn ein Badge den Status eines Elements auf einer Detailseite visualisiert, sollte ein Label die Aussage des Badges erläutern.

Werden mehrere Badges zur Statusvisualisierung nebeneinander verwendet, sind diese von links nach rechts nach ihrer Wichtigkeit zu ordnen. Das am weitesten links stehende Badge besitzt die höchste Gewichtung.

Beschriftung ​

Der Text ist immer im "Sentence Case" verfasst. Das heißt die Groß- und Kleinschreibung wird wie in einem normalen Satz verwendet. Der erste Buchstabe ist immer groß geschrieben. Danach werden nur noch Nomen groß geschrieben. Beispiele für eine korrekte Beschriftung: "Datensatz gesperrt", "Aktiv", "Standarddrucker", etc.

Verhalten ​

Ein Badge dient lediglich dem eindimensionalen Report und kann weder angeklickt werden noch eine Aktion auslösen.

States ​

Es gibt fünf Zustände für ein Badge: Information, Neutral, Erfolg, Warnung, Fehler.

Bei der Verwendung der verschiedenen Statusvarianten eines Badges ist zu beachten, dass die Darstellungsfarben immer einer Statusvariante zugeordnet sind und nicht unabhängig vom Status verwendet werden können.

Information

Ein Badge zur Information kann für jede Art von Statusanzeige oder -hinweis verwendet werden, die weder positiv oder negativ ist. Der visualisierte Status dient allein zur Information für den Anwender. Ein Badge mit dem Zustand "Information" wird in der Farbe Blau dargestellt.

Anwendungsbeispiel : Ein neu hinzugekommener Datensatz wird mit einem blauen Badge "Neu" gekennzeichnet.
Neutral

Ein neutrales Badge wird für neutrale Statusanzeigen verwendet und wird in der Farbe Grau dargestellt.

Anwendungsbeispiel : Eine zuvor fehlerhafte Auswertung wurde noch einmal durchgeführt, ist deswegen nicht mehr relevant und hat dadurch den Status Neutral.
Erfolg

Ein Erfolgs-Badge wird für positive Statusanzeigen verwendet und wird in der Farbe Grün dargestellt

Anwendungsbeispiel für ein Erfolgs-Badge: Das geplante Budget reicht aus. Der Status des Budgets wird mit einem grünen Erfolgs-Badge "Ausreichend" gekennzeichnet.
Warnung

Ein Warnungs-Badge wird für Warnanzeigen verwendet und in der Farbe Orange dargestellt
Fehler

Ein Fehler-Badge wird für negative Statusanzeigen verwendet und wird in der Farbe Rot dargestellt.

Anwendungsbeispiel : Das geplante Budget reicht nicht aus und wird überschritten. Der Status des Budgets wird mit einem roten Fehler-Badge "Überschritten" gekennzeichnet.

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-badge--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter:  https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fbadge

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-badge-flow</artifactId>
</dependency>

Import ​

java
import de.mate_ds.flow.component.badge.Badge;
import de.mate_ds.flow.component.badge.BadgeVariant;
import de.mate_ds.flow.component.icon.Icon;
import de.mate_ds.flow.component.icon.MaterialSymbol;
import com.vaadin.flow.component.html.Span;

Variants ​

Default ​

java
Badge badge = new Badge("Default");

Neutral ​

java
Badge badge = new Badge("Neutral");
badge.addThemeVariants(BadgeVariant.NEUTRAL);

Warning ​

java
Badge badge = new Badge("Warning");
badge.addThemeVariants(BadgeVariant.WARNING);

Danger ​

java
Badge badge = new Badge("Danger");
badge.addThemeVariants(BadgeVariant.DANGER);

Success ​

java
Badge badge = new Badge("Success");
badge.addThemeVariants(BadgeVariant.SUCCESS);

Icon ​

java
Badge badge = new Badge();
badge.add(new Icon(MaterialSymbol.SymbolInfo));
badge.add(new Span("Icon"));

Ellipsis ​

Fixed width with text truncation for overflow.

java
Badge badge = new Badge("Ellipsis because the text is too long and should not be completely visible");
badge.getElement().getStyle().setWidth("100px");

Auto Expand ​

Expands to fill available space, e.g. inside a grid cell.

java
Badge badge = new Badge("Auto expand for example inside a grid cell");
badge.addThemeVariants(BadgeVariant.AUTO_EXPAND);
badge.getElement().getStyle().setWidth("100px");