# Badge

Ein Badge stellt kompakt zusätzliche Informationen wie Metadaten, Status oder Kategorien dar.

```tsx
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](/04-components/status/alert-badge) oder Status-Colors
  verwechselt.

## Badge vs. AlertBadge

  

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

  

- der Hinweis kritisch, sicherheitsrelevant oder besonders wichtig ist.
    - weitere Informationen durch einen [Alert](/04-components/status/alert) notwendig sind.

---

# Color

Die [Color](/02-foundations/01-design/02-colors)-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](/04-components/status/alert-badge) oder Status-Colors
verwechselt werden.

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

<>
  <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>
</>
```

## 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](/02-foundations/01-design/02-colors#light-und-dark-color).

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

<Badge color="light">
  <Label>Scope</Label>
  <Text>Value</Text>
</Badge>
```

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

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

---

# Mit Scope

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

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

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

---

# 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](/04-components/actions/button) missbraucht werden.

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

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

---

# Badge entfernen

Über `onClose` lässt sich ein Badge vom User aus der Oberfläche entfernen.

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

<Badge
  onClose={() => {
    alert("closed!");
  }}
>
  Value
</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.

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

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

---

# 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](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `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. |