mittwald Flow Logo

Components

Badge

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

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
import {
  Badge,
  Label,
  Text,
} from "@mittwald/flow-react-components";

<Badge color="neutral">
  <Label>Scope</Label>
  <Text>Value</Text>
</Badge>

Badge Aktion

Ein Badge kann optional mit onPress eine Aktion auslösen, sollte jedoch nicht so vielseitig wie ein Button verwendet werden.

import { Badge } from "@mittwald/flow-react-components";

<Badge
  onPress={() => {
    alert("pressed!");
  }}
>
  Value
</Badge>

Badge entfernen

Ein Badge kann optional vom User aus der Benutzeroberfläche entfernt werden.

Value
import { Badge } from "@mittwald/flow-react-components";

<Badge
  onClose={() => {
    alert("closed!");
  }}
>
  Value
</Badge>

Color

Je nach Anwendungsfall stehen neun Badge-Color zur Auswahl: Neutral, Blue, Navy, Violet, Teal, Lilac, Green, Orange und Red.

ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
ScopeValue
import {
  Badge,
  Label,
  Text,
} from "@mittwald/flow-react-components";

<Row>
  <Badge color="neutral">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="blue">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="navy">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="violet">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="teal">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="lilac">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="green">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="orange">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
  <Badge color="red">
    <Label>Scope</Label>
    <Text>Value</Text>
  </Badge>
</Row>

Neutral: Nebenläufige Information (z. B. Archiviert, Gelöscht, Entwurf).

Blue: Informativ (z. B. Aktiv, Live, Im Prozess).

Violet: Ankündigung (z. B. Neu, Beta).

Green: Positiv (z. B. Abgeschlossen, Genehmigt, Erfolg).

Orange, Red: Negativ (z. B. Warnung, Fehler, Abgelehnt, Fehlgeschlagen).

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
import {
  Badge,
  Label,
  Text,
} from "@mittwald/flow-react-components";

<Badge color="light">
  <Label>Scope</Label>
  <Text>Value</Text>
</Badge>
ScopeValue
import {
  Badge,
  Label,
  Text,
} from "@mittwald/flow-react-components";

<Badge color="dark">
  <Label>Scope</Label>
  <Text>Value</Text>
</Badge>

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
import {
  Badge,
  Label,
  Text,
} from "@mittwald/flow-react-components";

<Badge color="neutral" isDisabled>
  <Label>Scope</Label>
  <Text>Value</Text>
</Badge>

Overview