Badge
Inline-Labels für Status, Kategorien und Metadaten – 11 Farbvarianten, 4 Größen, Symbole, Pill-/abgerundete Formen und Konturen.
Verwende die <Badge>-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<Badge>Default</Badge>Farben
Badges sind in 11 Farbvarianten verfügbar, um unterschiedliche Bedeutungen zu vermitteln:
<Badge color="gray">Gray</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="green">Green</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="red">Red</Badge>
<Badge color="purple">Purple</Badge>Oberflächenfarben
Für Badges, die sich an den Seitenhintergrund anpassen:
<Badge color="white">White</Badge>
<Badge color="surface">Surface</Badge>Destruktive Farben
Für Warn- oder Fehlerzustände:
<Badge color="white-destructive">White Destructive</Badge>
<Badge color="surface-destructive">Surface Destructive</Badge>Mit Symbolen
Füge Symbole hinzu, um Badges aussagekräftiger zu machen:
<Badge icon="circle-check" color="green">Verified</Badge>
<Badge icon="star" color="yellow">Featured</Badge>
<Badge icon="bolt" color="purple">New</Badge>
<Badge icon="clock" color="blue">Pending</Badge>Symboltypen
Gib mit iconType einen anderen Symbolstil an:
<Badge icon="star" iconType="solid" color="yellow">Solid</Badge>
<Badge icon="star" iconType="regular" color="yellow">Regular</Badge>
<Badge icon="star" iconType="duotone" color="yellow">Duotone</Badge>
<Badge icon="github" iconType="brands" color="gray">GitHub</Badge>Größen
Für unterschiedliche Kontexte stehen vier Größen zur Verfügung:
<Badge size="xs" color="blue">Extra Small</Badge>
<Badge size="sm" color="blue">Small</Badge>
<Badge size="md" color="blue">Medium</Badge>
<Badge size="lg" color="blue">Large</Badge>Formen
Wähle zwischen abgerundeten Ecken und einer Pillenform:
<Badge shape="rounded" color="purple">Rounded</Badge>
<Badge shape="pill" color="purple">Pill</Badge>Konturvariante
Verwende Badges mit Kontur für eine dezentere Darstellung:
<Badge stroke color="blue">Outlined Blue</Badge>
<Badge stroke color="green">Outlined Green</Badge>
<Badge stroke color="red">Outlined Red</Badge>
<Badge stroke color="purple">Outlined Purple</Badge>Deaktivierter Zustand
Reduziere die Deckkraft inaktiver Badges:
<Badge disabled color="gray">Inactive</Badge>
<Badge disabled color="blue">Disabled</Badge>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.
This feature requires a <Badge color="orange" size="sm">Premium</Badge> subscription.
You can also mark items as <Badge color="green" size="sm">New</Badge> or
<Badge color="red" size="sm">Deprecated</Badge>.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.