# CounterBadge

Ein CounterBadge weist kompakt auf neue oder ungelesene Inhalte hin.

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

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

---

# Best Practices

- Beziehe das CounterBadge eindeutig auf ein Element. Das kann zum Beispiel ein
  [Button](https://flow.mittwald.de/04-components/actions/button) oder Tab sein.
- Setze CounterBadges sparsam ein. Zu viele auf engem Raum überfordern den User.
- Mach den Wert über das darunterliegende Element zugänglich. Das CounterBadge
  selbst ist nicht accessible; auf einem Button enthält daher ein `aria-label`
  die Zahl.

---

# 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 auf anderen Elementen besser abzuheben, hat das CounterBadge eine
Border. Deren Farbe sollte an die Hintergrundfarbe angepasst werden.

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

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

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `count` | `number` | - | The number displayed inside the badge. |
| `elementType` | `"span" \| ExoticComponent<{}>` | - | The HTML element or React component rendered as the elements root. |
| `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. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |