Abzeichenkomponente
Zuletzt aktualisiert:
Nur CSS-CSS-Badge von Tailwind mit den Varianten Primär, Sekundär, Akzent, Info, Erfolg, Warnung und Fehler. Soft-, Outline- und Ghost-Stile, Größen XS-LG. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Badge-Komponenten sind kleine, kompakte Etiketten, die zum Hervorheben, Kategorisieren oder Anzeigen von Statusinformationen verwendet werden. Abzeichen wurden mit semantischem HTML und Tailwind CSS erstellt und unterstützen mehrere Größen, Farben und Stile für eine flexible Integration in Tabellen, Karten, Benutzerprofile und Benachrichtigungssysteme. Leichte und leicht zugängliche Abzeichen verbessern die Informationshierarchie, ohne dass sie visuell unübersichtlich werden.
Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
| Klasse | Typ | Beschreibung |
|---|---|---|
| badge | Base | Kleines Inline-Etikett |
| badge-outline | Stil | Transparente Füllung mit farbigem Rand |
| badge-soft | Stil | Gedämpfter getönter Hintergrund |
| badge-ghost | Stil | Dezenter Hintergrund ohne Rand |
| badge-dashed | Stil | Gestrichelter Randstil |
| badge-pill | Stil | Vollständig abgerundete Pillenform |
| badge-rounded | Stil | Moderate Rundung |
| badge-circle | Stil | Kreis gleicher Breite für einzelne Zeichen oder Zahlen |
| badge-square | Stil | Quadratisch ohne Rundung |
| badge-xs | Größe | Extra klein |
| badge-sm | Größe | Klein |
| badge-md | Größe | Mittel (Standard) |
| badge-lg | Größe | Groß |
| badge-xl | Größe | Extra groß |
| badge-2xl | Größe | 2× extra groß |
| badge-primary | Farbe | Primäre Designfarbe |
| badge-secondary | Farbe | Sekundäre Themenfarbe |
| badge-accent | Farbe | Akzentfarbe des Themas |
| badge-neutral | Farbe | Neutrale Themenfarbe |
| badge-info | Farbe | Semantische Infofarbe |
| badge-success | Farbe | Semantische Erfolgsfarbe |
| badge-warning | Farbe | Semantische Warnungsfarbe |
| badge-error | Farbe | Semantische Fehlerfarbe |
Grundlegende Verwendung
<span class="badge">Badge</span> |
<span className="badge">Badge</span> |
Abzeichengrößen
html
1 2 3 4 5 6 | <span class="badge badge-xs">Xsmall</span> <span class="badge badge-sm">Small</span> <span class="badge badge-md">Medium</span> <span class="badge badge-lg">Large</span> <span class="badge badge-xl">Xlarge</span> <span class="badge badge-2xl">2XLarge</span> |
Abzeichenfarben
html
1 2 3 4 5 6 7 8 9 | <span class="badge">Default</span> <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-accent">Accent</span> <span class="badge badge-info">Info</span> <span class="badge badge-success">Success</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-error">Error</span> <span class="badge badge-neutral">Neutral</span> |
Abzeichenstile
Weiche Abzeichen
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-soft">Default</span> <span class="badge badge-soft badge-primary">Primary</span> <span class="badge badge-soft badge-secondary">Secondary</span> <span class="badge badge-soft badge-accent">Accent</span> <span class="badge badge-soft badge-info">Info</span> <span class="badge badge-soft badge-success">Success</span> <span class="badge badge-soft badge-warning">Warning</span> <span class="badge badge-soft badge-error">Error</span> <span class="badge badge-soft badge-neutral">Neutral</span> |
Umrissabzeichen
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-outline">Default</span> <span class="badge badge-outline badge-primary">Primary</span> <span class="badge badge-outline badge-secondary">Secondary</span> <span class="badge badge-outline badge-accent">Accent</span> <span class="badge badge-outline badge-info">Info</span> <span class="badge badge-outline badge-success">Success</span> <span class="badge badge-outline badge-warning">Warning</span> <span class="badge badge-outline badge-error">Error</span> <span class="badge badge-outline badge-neutral">Neutral</span> |
Gestrichelte Abzeichen
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-dashed">Default</span> <span class="badge badge-dashed badge-primary">Primary</span> <span class="badge badge-dashed badge-secondary">Secondary</span> <span class="badge badge-dashed badge-accent">Accent</span> <span class="badge badge-dashed badge-info">Info</span> <span class="badge badge-dashed badge-success">Success</span> <span class="badge badge-dashed badge-warning">Warning</span> <span class="badge badge-dashed badge-error">Error</span> <span class="badge badge-dashed badge-neutral">Neutral</span> |
Geisterabzeichen
html
<span class="badge badge-ghost">Ghost</span> |
Abzeichenformen
Abgerundetes Abzeichen
html
<span class="badge badge-error badge-rounded">10</span> |
Pillenabzeichen
html
<span class="badge badge-warning badge-pill">Pill badge</span> |
Quadratisches Abzeichen
html
<span class="badge badge-neutral badge-square">99+</span> |
Kreisabzeichen
html
1 2 3 | <span class="badge badge-success badge-circle"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg> </span> |
Abzeichenindikatoren
Leere Abzeichen eignen sich perfekt für Statusanzeigen oder Benachrichtigungspunkte.
html
1 2 3 4 5 | <span class="badge badge-primary badge-circle badge-lg"></span> <span class="badge badge-primary badge-lg"></span> <span class="badge badge-primary badge-md"></span> <span class="badge badge-primary badge-sm"></span> <span class="badge badge-primary badge-xs"></span> |
Zusammensetzung des Abzeichens
Integrieren Sie Abzeichen mit Symbolen oder verschachteln Sie sie in andere Komponenten wie Schaltflächen.
Abzeichen mit Symbol
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <span class="badge badge-info"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> Info </span> <span class="badge badge-success"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m9 12 2 2 4-4"></path> </svg> Success </span> <span class="badge badge-warning"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path> <path d="M12 9v4"></path> <path d="M12 17h.01"></path> </svg> Warning </span> <span class="badge badge-error"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m4.9 4.9 14.2 14.2"></path> </svg> Error </span> |
Abzeichen-Innenknopf
html
1 2 3 4 5 6 7 8 | <button class="btn btn-primary btn-sm btn-active"> Message <span class="badge badge-primary badge-xs">+49</span> </button> <button class="btn btn-sm"> Inbox <span class="badge badge-xs badge-primary">+27</span> </button> |