Badge

Ein Badge stellt kompakt zusätzliche Informationen wie Metadaten, Status oder Kategorien dar. Es unterstützt die schnelle Orientierung, ohne vom Hauptinhalt abzulenken.
GitHubMarkdown

Grundlagen

Best Practices

Achte bei der Verwendung eines Badges darauf, dass ...

  • die Beschreibung kurz und prägnant ist (idealerweise in 1–3 Wörtern).
  • die Farben konsistent für bestimmte Informationen verwendet werden.
  • mithilfe eines Scopes dem Badge eine übergeordnete Bezeichnung hinzugefügt wird.
  • diese für Metadaten und Kategorien verwendet wird. Bei kritischere Informationen wird eher eine AlertBadge in Kombination eines Alert verwendet.

Verwendung

Verwende einen Badge, um ...

  • Metadaten hervorzuheben (z. B. Bezahlt, Überfällig, Entwurf).
  • einen Status zu kennzeichnen (z. B. Aktiviert, Deaktiviert).
  • eine Kategorie oder Zugehörigkeit darzustellen (z. B. Support, Marketing, Entwicklung).
  • wichtige Änderungen und Neuerungen hervorzuheben (z. B. Neu, Beta, Update).
  • Prioritäten zu kennzeichnen (z. B. Priorität: Hoch, Priorität: Mittel, Priorität: Niedrig).
  • gesetzte Filter in der List darzustellen.

Badge vs. AlertBadge

Verwende ein Badge, wenn z. B. ...

  • Metadaten oder ergänzende Informationen dargestellt werden sollen.
  • keine sofortige Aktion oder erhöhte Aufmerksamkeit notwendig ist.

Verwende ein AlertBadge, wenn z. B. ...

  • der Hinweis kritisch, sicherheitsrelevant oder besonders wichtig ist.
  • weitere Informationen durch einen Alert notwendig sind.

Playground

Verwende <Badge />, um ein Badge darzustellen.

Value
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.

ScopeValue

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.

Value

Color

Es stehen insgesamt 9 Badge-Colors zur Auswahl: Neutral, Blue, Navy, Violet, Teal, Lilac, Green, Orange und Red.

ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue

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.

ScopeValue
ScopeValue

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.

ScopeValue

Properties

PropertyTypeDefaultDescription
color"neutral" | "dark" | "light" | "dark-static" | "light-static" | "violet" | "green" | "blue" | "teal" | "lilac" | "navy" | "orange" | "red""neutral"The color of the badge.
isDisabledboolean-Whether the badge is disabled.
childrenReactNode-
wrapWithReactElement<unknown, string | JSXElementConstructor<any>>-
refRef<HTMLSpanElement>-Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
keyKey-
classNamestring-The elements class name.

Events

PropertyTypeDefaultDescription
onPress((e: PressEvent) => void)-Handler that is called when the badge is pressed.
onClose((e: PressEvent) => void)-Handler that is called when the badges close icon is pressed.

Auf dieser Seite