‍

Components

Integrations

Badge

Ein Badge stellt kompakt zusätzliche Informationen wie Metadaten, Status oder Kategorien dar.
Value
import { Badge } from "@mittwald/flow-react-components";

<Badge>Value</Badge>

Best Practices

  • Halte die Beschriftung kurz und prägnant, idealerweise auf ein bis drei Wörter.
  • Verwende die Colors konsistent für gleiche Informationen.
  • Setze die Colors Blue, Green, Orange und Red mit Bedacht ein. Sie werden leicht mit AlertBadges‍ oder Status-Colors verwechselt.

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.

Color

Die Color‍-Varianten können frei gewählt werden – achte dabei auf die beabsichtigte Wirkung. Neutral eignet sich zum Beispiel für sekundäre Informationen, da das dezente Grau weniger Aufmerksamkeit erzeugt.

Setze Blue, Green, Orange und Red mit Bedacht ein, da sie leicht mit AlertBadges‍ oder Status-Colors verwechselt werden.

ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue

Light und Dark

Um auf farbigen oder dekorativen Hintergründen ausreichend Kontrast zu erreichen, kann das Badge auch in Light und Dark dargestellt werden. Mehr zur richtigen Verwendung von Light und Dark findest du in den Foundations unter Color‍.

ScopeValue
ScopeValue

Mit Scope

Ein Scope ordnet das Badge einer Kategorie zu, die meist mehrere Werte hat (z. B. Priorität: hoch, Priorität: niedrig).

ScopeValue

Badge Aktion

Über onPress kann ein Badge eine Aktion auslösen, etwa um weiterführende Informationen zu öffnen. Es sollte dabei nicht als Ersatz für einen Button‍ missbraucht werden.

Mit Button

Ein Button hinter dem Text wird am Ende des Badge dargestellt.

PrioritätHoch

Mit onClose

Über onClose platzierst du einen X-Button im Badge. Nutze ihn z. B., um das Badge entfernbar zu machen.

Value

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

PropertyTypeDescription
children
ReactNode
className
string
The elements class name.
color
dark | light | dark-static | light-static | neutral (default) | violet | green | blue | teal | lilac | navy | orange | red
The color of the badge.
isDisabled
boolean
Whether the badge is disabled.
wrapWith
ReactElement<unknown, string | JSXElementConstructor<any>>
A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Events

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

Auf dieser Seite