Verwende ein Badge, wenn z. B. ...
- Metadaten oder ergänzende Informationen dargestellt werden sollen.
- keine sofortige Aktion oder erhöhte Aufmerksamkeit notwendig ist.
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 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.
Badge entfernen
Über onClose lässt sich ein Badge vom User aus der Oberfläche entfernen.
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
| Property | Type | Default | Description |
|---|---|---|---|
color | "dark" | "light" | "dark-static" | "light-static" | "neutral" | "violet" | "green" | "blue" | "teal" | "lilac" | "navy" | "orange" | "red" | "neutral" | The color of the badge. |
isDisabled | boolean | - | Whether the badge is disabled. |
children | ReactNode | - | |
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. |
ref | Ref<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 |
key | Key | - | |
className | string | - | The elements class name. |
Events
| Property | Type | Default | Description |
|---|---|---|---|
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. |