--- title: Badge description: Inline-Labels für Status, Kategorien und Metadaten – 11 Farbvarianten, 4 Größen, Symbole, Pill-/abgerundete Formen und Konturen. --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. Verwende die ``-Komponente, um Inhalte mit Statusindikatoren, Kategoriebezeichnungen oder Versionsmarkierungen zu versehen. Badges werden als kompakte Inline-Elemente dargestellt und können daher in Fließtext eingefügt oder in einem Layout angeordnet werden. ## Einfaches Badge Ein einfaches Badge mit Standarddarstellung: Standard ```mdx Default ``` ## Farben Badges sind in 11 Farbvarianten verfügbar, um unterschiedliche Bedeutungen zu vermitteln:
Grau Blau Grün Gelb Orange Rot Violett
```mdx Gray Blue Green Yellow Orange Red Purple ``` ### Oberflächenfarben Für Badges, die sich an den Seitenhintergrund anpassen:
Weiß Oberfläche
```mdx White Surface ``` ### Destruktive Farben Für Warn- oder Fehlerzustände:
Weiß, destruktiv Oberfläche, destruktiv
```mdx White Destructive Surface Destructive ``` ## Mit Symbolen Füge Symbole hinzu, um Badges aussagekräftiger zu machen:
Verifiziert Hervorgehoben Neu Ausstehend
```mdx Verified Featured New Pending ``` ### Symboltypen Gib mit `iconType` einen anderen Symbolstil an:
Vollflächig Standard Duotone GitHub
```mdx Solid Regular Duotone GitHub ``` ## Größen Für unterschiedliche Kontexte stehen vier Größen zur Verfügung:
Extra klein Klein Mittel Groß
```mdx Extra Small Small Medium Large ``` ## Formen Wähle zwischen abgerundeten Ecken und einer Pillenform:
Abgerundet Pille
```mdx Rounded Pill ``` ## Konturvariante Verwende Badges mit Kontur für eine dezentere Darstellung:
Blau mit Kontur Grün mit Kontur Rot mit Kontur Violett mit Kontur
```mdx Outlined Blue Outlined Green Outlined Red Outlined Purple ``` ## Deaktivierter Zustand Reduziere die Deckkraft inaktiver Badges:
Inaktiv Deaktiviert
```mdx Inactive Disabled ``` ## Inline-Verwendung Badges funktionieren innerhalb von Text. Für diese Funktion ist ein Premium-Abonnement erforderlich. Du kannst Elemente auch als Neu oder Veraltet kennzeichnen. ```mdx This feature requires a Premium subscription. You can also mark items as New or Deprecated. ``` ## Props Farbvariante: `gray`, `blue`, `green`, `yellow`, `orange`, `red`, `purple`, `white`, `surface`, `white-destructive`, `surface-destructive`. Badge-Größe: `xs`, `sm`, `md`, `lg`. Badge-Form: `rounded`, `pill`. Name des Font Awesome-Symbols. Symbolstil: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. Als Badge mit Kontur und transparentem Hintergrund anzeigen. Deckkraft reduzieren, um einen inaktiven Zustand anzuzeigen. Zusätzliche CSS-Klassen für die individuelle Gestaltung. ## Wie geht es weiter? Alle verfügbaren Komponenten durchsuchen Erfahren, wie Komponenten in MDX verwendet werden