# Badge

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

## Develop

# 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>>` | - | - |
| `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. |