---
name: Badge
description: Onesown Blazor Komponente Badge (Common). Verwende diesen Skill wenn du die Badge-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# Badge

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Common  
**Basisklasse:** `OoComponentBase`  

Kompaktes Label-Element zur Kennzeichnung von Status, Kategorien oder Zählern. Unterstützt Text, Icon, beliebiges ChildContent sowie optionale Klick-Interaktion und Farbpalette.

**Live-Demo:** https://components.schini.com/demo/badge  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Text`` | ``string`` |  | Anzeigetext des Badges. |
| ``Icon`` | ``string`` |  | Material-Symbol-Name (z.B. "check", "star"). Wird neben oder statt Text angezeigt. |
| ``Title`` | ``string`` |  | HTML-Title-Attribut – erscheint als nativer Browser-Tooltip beim Hover. |
| ``ButtonStyle`` | ``OoButtonStyle`` | ``OoColorPalette.Neutral`` | Farb- und Stil-Token. Wert aus OoColorPalette (z.B. OoColorPalette.Primary, OoColorPalette.Success.Outline). Standard: OoColorPalette.Neutral. |
| ``Radius`` | ``string`` | ``OoRadius.Sm`` | Border-Radius. OoRadius-Konstanten oder beliebiger CSS-Wert. Standard: OoRadius.Sm. |
| ``OnClick`` | ``EventCallback<MouseEventArgs>`` |  | Wird ausgelöst wenn der Nutzer auf das Badge klickt. Ohne Delegate ist das Badge nicht klickbar. |
| ``ChildContent`` | ``RenderFragment`` |  | Beliebiges Markup als Badge-Inhalt – ersetzt Text und Icon, wenn gesetzt. |

## Geerbte Parameter (OoComponentBase)

Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht.

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` |  | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |

## Hinweise

- Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben
- Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben
- Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht
- Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl)
- Einfache Beschriftung: Text="Neu" ButtonStyle="OoColorPalette.Primary"
- Mit Icon: Icon="check_circle" für rein-ikonische Badges (kein Text nötig)
- Text + Icon kombinierbar: Text="Aktiv" Icon="check"
- Klickbar machen: OnClick-Callback setzen; ohne Callback ist das Badge nicht interaktiv
- Eigenes Markup: ChildContent statt Text/Icon für komplexen Inhalt
- Radius anpassen: Radius="OoRadius.Full" für Pill-Form, Standard ist OoRadius.Sm
- Größe: Size-Parameter (von OoComponentBase) setzt font-size als CSS-Klasse