# UI: Badge

> Eine kleine Zahl oder ein Status neben einem Element.

Source: https://pithyx.org/de/docs/reference/sdk/ui/badge/
Markdown: https://pithyx.org/de/docs/reference/sdk/ui/badge.md

Eine kleine Zahl oder ein Status neben einem Element. Importiere die Token-Datei einmal (`@pithyx/ui/tokens.css`) und umschließe die App mit `UiProvider`; siehe [@pithyx/ui](https://pithyx.org/de/docs/sdk/ui/).

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

## Funktionen

### Badge()

```ts
function Badge(props): Element;
```

A small count or status next to an item, for example in a list or on a tab. It is plain text for screen readers;
give it words where a number alone says too little.

#### Parameter

| Parameter          | Typ                                                                                                                       | Beschreibung                                                                  |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| `props`            | \{ `children`: `ReactNode`; `tone?`: `"danger"` \| `"highlight"` \| `"accent"` \| `"neutral"`; `className?`: `string`; \} | The content and the tone.                                                     |
| `props.children`   | `ReactNode`                                                                                                               | The count or the status text.                                                 |
| `props.tone?`      | `"danger"` \| `"highlight"` \| `"accent"` \| `"neutral"`                                                                  | The color: `highlight` (amber, the default), `accent`, `neutral` or `danger`. |
| `props.className?` | `string`                                                                                                                  | Extra class names, added after the badge's own.                               |

#### Rückgabewert

`Element`

The badge element.