# CounterBadge

Ein CounterBadge dient dazu, dem User schnell und kompakt auf neue oder ungelesene Inhalte hinzuweisen.

## Overview

# Playground

Verwende `<CounterBadge />`, um ein CounterBadge darzustellen.

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

<CounterBadge count={5} />
```

---

# Ohne Inhalt

Ein CounterBadge kann auch ohne Inhalt verwendet werden, um auf einen Status
hinzuweisen.

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

<CounterBadge />
```

---

# Hohe Zahlen

Ist der tatsächliche Wert 100 oder höher, wird stattdessen „99+“ im CounterBadge
angezeigt.

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

<CounterBadge count={120} />
```

---

# Innerhalb eines Buttons

Um sich bei der Verwendung auf anderen Elementen besser von diesen abzuheben,
hat das CounterBadge eine Border. Diese ist im Default weiß und muss jeweils an
die Hintergrundfarbe angepasst werden.

## Accessibility

Da das CounterBadge selbst nicht accessible ist, muss der Wert über das
darunterliegende Element vermittelt werden, in diesem Beispiel erhält der Button
ein Aria Label, das die Zahl des Counters enthält.

```tsx
import {
  Button,
  CounterBadge,
  IconNotification,
} from "@mittwald/flow-react-components";

<Button variant="plain" aria-label="Benachrichtigungen: 7">
  <IconNotification />
  <CounterBadge count={7} />
</Button>
```