Playground
Verwende <Badge />, um ein Badge darzustellen.
import { Badge } from "@mittwald/flow-react-components"; <Badge>Value</Badge>
Mit Scope
Ein Scope ist wie eine Bezeichnung für das gesamte Badge. Ein Scope besitzt meistens mehrere Werte z. B. Priorität: hoch, Priorität: niedrig.
Badge Aktion
Ein Badge kann optional mit onPress eine Aktion auslösen, sollte jedoch nicht
so vielseitig wie ein Button verwendet werden.
Badge entfernen
Ein Badge kann optional vom User aus der Benutzeroberfläche entfernt werden.
Color
Es stehen insgesamt 9 Badge-Colors zur Auswahl: Neutral, Blue, Navy, Violet, Teal, Lilac, Green, Orange und Red.
Die verschiedenen Color-Varianten können frei verwendet werden. Dabei sollte jedoch immer die beabsichtigte visuelle Wirkung berücksichtigt werden. Neutral eignet sich beispielsweise für begleitende oder sekundäre Informationen, da das dezente Grau weniger Aufmerksamkeit erzeugt. Violet kann dagegen gut eingesetzt werden, um neue Inhalte oder Features hervorzuheben.
Setze die Colors Blue, Green, Orange und Red mit Bedacht ein, da sie leicht mit AlertBadges oder Status-Colors verwechselt werden.
Light und Dark
Zusätzlich kann das Badge in Light und Dark dargestellt werden. Beide Varianten eigenen sich, wenn die Standardfarben auf farbigen oder dekorativen Hintergründen nicht gut funktionieren.
Disabled
In Ausnahmefällen können deaktivierte Badges verwendet werden, um eine Funktion temporär als nicht verfügbar darzustellen, ohne diese vollständig aus der Oberfläche zu entfernen.